How to change colors in a Form?

Take Freelancer template as example.
When clicking in the Email Form, the header text goes up, smaller, so it makes room to enter whatever.

image

Now this smaller text I’ve been trying to give a different color, by overriding all teal kinda colors I find with inspecting the code using F12 (dev tools of chrome), but it doesn’t change the color.

How to?

Here is the CSS you need to change. Add this to your style sheet and edit the color rule.

To find it using Chrome developer tools, you need to use the Force element state feature on the input element, which then allows you to expand the selected label element, and see the pertinent CSS.

.form-floating > .form-control:focus ~ label {
  color: #18bc9c;
  font-size: 1em;
}
1 Like