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;
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.