input border style


Topic: input border style

Jens Krieg pro premium priority asked 2 years ago

Expected behavior no border style

Actual behavior The border style, which does not conform to the predetermined roundness, is visible and disappears when the input field is selected.

Resources (screenshots, code snippets etc.)

<MDBInputGroup>
            <MDBInput
              label="Search"
              type="text"
              className="searchBar bg-light"
              size="sm"
            />
            <MDBBtn color="dark" className="search-btn">
              <MDBIcon icon="search" />
            </MDBBtn>
 </MDBInputGroup>

and css part

.searchBar {
  width: 15rem;
  transition: all 0.5s ease-in;
  border-radius: 50px 0 0 50px;
}

.search-btn{
  border-radius: 0 50px 50px 0;
}

enter image description here

enter image description here

Am I doing something wrong?


Krzysztof Wilk staff answered 2 years ago

Hi!

We append the notch div to our inputs which also should be styled. You have to operate on them also. So you can do i.e.

.form-outline .form-control:focus ~ .form-notch .form-notch-trailing,
.form-outline .form-control.focused ~ .form-notch .form-notch-trailing,
.form-outline .form-control ~ .form-notch .form-notch-trailing,
.form-outline .form-control ~ .form-notch .form-notch-trailing {
  border-radius: 20px;
}

to change the right trailing notch. You should also change the middle and leading ones.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 4.2.0
  • Device: hp
  • Browser: chrome / firefox
  • OS: ubuntu
  • Provided sample code: No
  • Provided link: No
Tags