Topic: Change focus border color

sandor farkas priority asked 2 years ago

Expected behavior I want to be able to change the color of the input:focus globally.

Actual behavior It's not possible to change the input:focus of an input field. It seems like JS is overwriting it again.

How can I change globally the focus border color of as well as ?

Thank you very much.

sandor farkas priority answered 2 years ago

amazing! Thank you! I thought I did exactly this. :)

Krzysztof Wilk staff commented 2 years ago

I'm glad I could help. If you have more questions or problems - feel free to ask :)

Keep coding!

Krzysztof Wilk staff answered 2 years ago


You can change the focus border color of the input (to i.e. red) using 2 CSS rules below:

.form-control:focus ~ .form-notch div {
  border-color: red !important;

.form-control:focus ~ .form-label {
  color: red !important;

Keep coding!

Leandro Francisco free commented 1 year ago

Hello! I'm using something like this in MDBootstrap5:

         <div class="form-outline">
            <textarea class="form-control" id="msg" rows="6"></textarea>
            <label class="form-label" for="msg">Your message here.</label>

and with your styling for the notch div I'm getting like a square div focused inside the textarea.... could you please help me? yours is the best reply that I've see till this moment...

Thanks in advance, Leandro.

Krzysztof Wilk staff commented 1 year ago


I see you are not using JSX syntax. Which package do you use - MDB5 Standard or MDB5 React? :)

Keep coding!

Leandro Francisco free commented 1 year ago

I'm using MDB5-STANDARD-UI-KIT-Free-4.1.0.

Thank you a lot for answering!

Krzysztof Wilk staff commented 1 year ago

Could you create a new topic in the "Standard" section of the forum here It would be much better to help and isolate this issue in a new one :)

Leandro Francisco free commented 1 year ago



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

  • User: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: desktop
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No