Change focus border color

Topic: Change focus border color

sandor farkas 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.

Add comment

sandor farkas priority answered 3 years ago

0 0 Best answer

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!

Add comment

Krzysztof Wilk staff answered 3 years ago

0 0 Best answer

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

Done!

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

Thanks!

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

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

sandor farkas

195Support score
13Questions 13Answers 6Snippets