Topic: Change Color of MDBInput Inside of Form
I want to change the color of my active MDBInput fields to a light grey. I found this Snippet which does the work in the example, but in my case it doesn't override the blue border, but I can't find where to override it. Would appreciate some help
here is the code of the input:
<MDBInput
label="Nachname*"
type="text"
className="form-control border-0"
/>
I copy pasted the css out of the snippet.
Hi!
You should also remove the box shadow. The code below should help:
.form-outline .form-control:focus ~ .form-notch .form-notch-leading,
.form-outline .form-control.focused ~ .form-notch .form-notch-leading {
border-top: 0.125rem solid #ffaabb;
border-bottom: 0.125rem solid #ffaabb;
border-left: 0.125rem solid #ffaabb;
box-shadow: none;
}
.form-outline .form-control:focus ~ .form-notch .form-notch-middle,
.form-outline .form-control.focused ~ .form-notch .form-notch-middle {
border-bottom: 0.125rem solid #ffaabb;
box-shadow: none;
}
.form-outline .form-control:focus ~ .form-notch .form-notch-trailing,
.form-outline .form-control.focused ~ .form-notch .form-notch-trailing {
border-color: currentcolor currentcolor currentcolor #ffaabb;
border-bottom: 0.125rem solid #ffaabb;
border-right: 0.125rem solid #ffaabb;
border-top: 0.125rem solid #ffaabb;
box-shadow: none;
}
.form-outline .form-control:focus ~ .form-label {
color: #ffaabb;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB React
- MDB Version: MDB5 4.2.0
- Device: Lenovo Thinkpad
- Browser: Google Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes