Topic: Change form label color when in focus

Austin free asked 6 years ago


I am trying to change the color of the label and input box underline of the contact us form: https://mdbootstrap.com/components/bootstrap-contact-form/ It seems the color is changed using border-bottom and box-shadow but I am unable to get alter these.

Austin free answered 6 years ago


Thank you so much, that works great! I just had to add this to style the message body box as it uses the textarea tag instead of input:
.md-form textarea[type=text]:focus:not([readonly]) + label {
color: #177BA8; }
.md-form textarea[type=text]:focus:not([readonly]) {
box-shadow: 0 1px 0 0 #177BA8;
border-bottom: 1px solid #177BA8; }

Marta Wierzbicka staff commented 6 years ago

You're welcome.

Marta Wierzbicka staff answered 6 years ago


Hi, try this CSS code below:
.md-form input[type=text]:focus:not([readonly]) + label {
color: #CC0000; }
.md-form input[type=text]:focus:not([readonly]) {
box-shadow: 0 1px 0 0 #CC0000;
border-bottom: 1px solid #CC0000; }
Best, Marta

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

  • ForumUser: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags