The CSS Placeholder Color 🌈 of an HTML Input Field
Last Updated -
Providing visual queues to application users provides a better experience that can lead to fewer errors and less frustration.
Color is a simple, subtle way to convey meaning to users. It can also be helpful in establishing a brand.
HTML input fields can have placeholder text added that can serve either as a label or for instructions.
But you can also customize the color to convey extra meaning. You can change placeholder color to convey meaning or just bring attention to a field.
CSS provides two selectors or ways to apply styles to input placeholders and the input elements with placeholder text.
- ::placeholder (vendor specific variations)
- :placeholder-shown
Both selectors should be considered non-standard as there is no official standard for this styling yet. The key is knowing how to define selectors to create style rules for the place holder text and input elements.
You should also accept this is a progressive enhancement. That means as long as the browser supports the feature it can be leveraged. But if it doesn't the form does not break.
Setting Place Holder Color and other Properties Using CSS
The key to applying special colors and other styling to an HTML input's placeholder text is defining unique rules for the ::placeholder pseudo elements.
Normally, HTML input field placeholder text is rendered using default styles and a slightly gray color. But thanks to the ::placeholder pseudo element you can change this to fit your needs.
::placeholder { //place rules here } If you are not familiar with pseudo element selectors they are typically prefixed by ::. Sometimes you might see a single :, but the may only apply to some vendor specific implementations.
The pseudo element selector can be appended to any other selector. For our purposes I have defined a series of rules to change the color of different placeholders text.
A problem presented by the ::placeholder pseudo element is it is not a standard selector, yet. This means there are different variations you need to support.
While most browsers support the ::placeholder selector, you should still include rules for vendor specific selectors. These are prefixed with -webkit-, -moz- and -ms-. You can see how I used them in the code below.
I also found that stacking the selectors like I would normally do does not work.
This means you must define a unique rule to apply the styles to the placeholder text. This leans to a series of duplicated rules, which makes for messy maintenance.
.text-danger input::-webkit-input-placeholder { color: #dc3545; font-size: 1.3em; line-height: 1.3em; text-transform: uppercase; } .text-danger input:-moz-placeholder { color: #dc3545; font-size: 1.3em; line-height: 1.3em; text-transform: uppercase; } .text-danger input::-moz-placeholder { color: #dc3545; font-size: 1.3em; line-height: 1.3em; text-transform: uppercase; } .text-danger input:-ms-input-placeholder { color: #dc3545; font-size: 1.3em; line-height: 1.3em; text-transform: uppercase; } .text-danger input::-ms-input-placeholder { color: #dc3545; font-size: 1.3em; line-height: 1.3em; text-transform: uppercase; } .text-danger input::placeholder { color: #dc3545; font-size: 1.3em; line-height: 1.3em; text-transform: uppercase; } To demonstrate the affect I defined a series of rules to apply different colors. Each color corresponds to standard Bootstrap colors to indicate different states.
I thought using the Bootstrap colors with their corresponding states would help convey the thought of using placeholder text styles to convey meaning to the user.
You are not limited to setting the placeholder text. You can apply any style you want to the placeholder text. For extra affect I increased the font size to 1.3em and made the text all capital letters.
The final result is a simple form with input fields using customized placeholder text styles.
Styling Input Elements Displaying Place Holder Text Using CSS
Another new pseudo selector you can use to apply styles based on the presence of place holder text is :placeholder-shown.
This selector is supported by WebKit based browsers, like Chrome and Safari, and FireFox.
This selector works by selecting input fields displaying place holder text. The styles are applied to the actual input element, not the place holder text.
input:placeholder-shown { border-color: purple; text-overflow: ellipsis; } In this example I added a purple border to the matching input fields. I also set any overlfowing text to be truncated with an ellipsis. This way the text does not get cut off abruptly.
Summary
Applying custom styles can be a powerful way to provide useful queues to your users. This can reduce the chances of input errors, forgotten values and just making forms more usable.
