Change focus border color


Topic: Change focus border color

sandor farkas pro premium priority asked 3 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.


Krzysztof Wilk staff answered 3 years ago

Hi!

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 commented 2 years 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>
          </div>

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 2 years ago

Hi!

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

Keep coding!


Leandro Francisco commented 2 years ago

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

Thank you a lot for answering!


Krzysztof Wilk staff commented 2 years ago

Could you create a new topic in the "Standard" section of the forum here https://mdbootstrap.com/support/cat/standard/? It would be much better to help and isolate this issue in a new one :)


Leandro Francisco commented 2 years ago

Done!

https://mdbootstrap.com/support/standard/change-focus-color-to-inputs-and-textareas-in-mdb5/

Thanks!


sandor farkas pro premium priority answered 3 years ago

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


Krzysztof Wilk staff commented 3 years ago

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

Keep coding!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • User: Pro
  • 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