Change form label color when in focus/active

web
mobile

Topic: Change form label color when in focus/active

bobdempsey83 pro asked 2 years ago

Hey everyone, I have an md-form that I'd like to change the color of an input label when the cursor enters it. I've tried input:active & input:focus to change color, but it's not working for me. Any suggestions? Thanks! 🙂

Marta Szymanska staff answered 2 years ago

Hi, try this code: .md-form input[type=text]:focus:not([readonly]) + label { color: #CC0000; } Best, Marta

bobdempsey83 pro commented 2 years ago

Hey thanks so much Maria. That code worked for my name & email inputs, but not the textarea. Do you have anything that will work for the textarea? Thanks!

Marta Szymanska staff answered 2 years ago

Hi, I don't have a solution for textarea now. In MDB, we don't change label color of textarea on active. Best, Marta

bobdempsey83 pro commented 2 years ago

Ok thanks very much!

Marta Szymanska staff commented 2 years ago

I've just got the idea for textarea label. You need to add a new class to .md-form wrapper of textarea. Try this: .primary-textarea.md-form label.active { color: #4285F4; }

bobdempsey83 pro commented 2 years ago

Hey here's the working example: Change form color & label on focus .navy-blue-skin textarea.md-textarea:focus:not([readonly])+label Change input color on focus: .navy-blue-skin textarea.md-textarea:focus:not([readonly]) Thanks again for the help! :)

Marta Szymanska staff commented 2 years ago

You're welcome.

Necrozma answered 2 weeks ago

how do i get onto settings on focus


Grzegorz Bujański staff commented a week ago

Hi, Could You Please Clarify, what do you want to do?

If I understand correctly you want change style on focus? Then you need try something like that:

.md-form:focus { color: #CC0000; }

Best, Grzegorz


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No