Topic: Change Color of MDBInput Inside of Form

timo.js free asked 1 year ago

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

how it looks

here is the code of the input:

      className="form-control border-0"

I copy pasted the css out of the snippet.

Krzysztof Wilk staff answered 1 year ago


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;

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: 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