[Thom GParticipant]

Hi,

I’ve found various threads on the forum to change the type color of the form input fields, but is there a way to change the color and styling of the forms fields? Ex First Name, Last Name, Email..etc Also the glow effect when you select a field.

Thank you!

[RadModerator]

Hi Thom,

Thank you for writing in!

You could only change fields placeholder’s color, but not the placeholder focus’s effect. Although you could add glowing effect on field border.

You can add this at your customizer’s custom css, or at child theme’s style.css.

::-webkit-input-placeholder { color: #FFCCC00; }
:-moz-placeholder { color: #FFCCC00; }
::-moz-placeholder { color: #FFCCC00; }
:-ms-input-placeholder {  color: #FFCCC00; }

textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
background-color: white;
border: 1px solid red;
-webkit-box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(255, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
}

Hope this helps.

[Thom GParticipant]

Hi,

Thank you for your response – that let’s you change the input area, but how can I change the font color of the placeholder fields text?

Thanks

[AlexanderKeymaster]

Hi Thom,

The first 4 rules in the code above are for changing the placeholder text color. Right now it’s not something that can be consistently changed in all browsers. The glow effect, and the placeholder text are handled by the browser and not always controllable in CSS>

[Author]

Posts