1. Home
  2. Knowledge Base
  3. Tips & Tricks
  4. Override Input Field Placeholder Colour

Override Input Field Placeholder Colour

By default, our optin form placeholder text has an opacity applied to it.  This is standard across most user interface design for forms, as this placeholder text is to advise on what should be entered, and should not look like the field was already filled.

How to override our input field placeholder opacity

If you want to override the input field text opacity you can do this by adding the following code inside Settings > Custom CSS:

::placeholder { /* Firefox, Chrome, Opera */
opacity:0.8 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
opacity:0.8 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
opacity:0.8 !important;
}
  

How to override our input field placeholder colour and opacity

If you want to override the colour as well – you can add a color variable to the code.  Note that you must have the !important value to force this to override our current colour selections made in editing your input form

::placeholder { /* Firefox, Chrome, Opera */
color: #222222 !important;
opacity:0.8 !important;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #222222 !important;
opacity:0.8 !important;
}
::-ms-input-placeholder { /* Microsoft Edge */
color: #222222 !important;
opacity:0.8 !important;
}
Updated on November 28, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for? Don't worry we're here to help!
Contact Support