Topic: input border style
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;
}
Am I doing something wrong?
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.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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