Change form label color when in focus

Topic: Change form label color when in focus

Austin 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.

Add comment

Austin answered 6 years ago

0 0 Best answer

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 Szymanska staff pro premium commented 6 years ago

You're welcome.

Add comment

Marta Szymanska staff pro premium answered 6 years ago

0 0 Best answer

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

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

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

About author

Austin

55Support score
4Questions 10Answers

0Snippets likes 0Snippets