Topic: Change form label color when in focus/active

bobdempsey83 pro asked 6 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! 🙂

Necrozma free answered 5 years ago


how do i get onto settings on focus


Grzegorz Bujański staff commented 5 years 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


Marta Wierzbicka staff answered 6 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 6 years ago

Ok thanks very much!

Marta Wierzbicka staff commented 6 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 6 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 Wierzbicka staff commented 6 years ago

You're welcome.

Marta Wierzbicka staff answered 6 years ago


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

bobdempsey83 pro commented 6 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!


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags