Skip to content

April 26, 2014

Reset of Placeholder text behaviour and color

placeholder

In HTML5 exists an interesting attribute, which is defined to set temporary text in input fields of web-forms. It’s a “placeholder” attribute. Interesting thing, that behaviour of the input text field with this attribute can be different in a different browsers, also a color of this text may vary depending of browser.

We are lucky, and with HTML5 features also appears a lot of CSS3 things. Using a features of CSS3 we can do many cool things. One of such things, is a reset of Placeholder text behaviour and color.


See the Pen Reset of Placeholder text behaviour and color by Aleksey Korovin (@alekskorovin) on CodePen

Let’s see what we have to do for making behaviour the same across browsers: Firefox, Chrome, Internet Explorer:

/* Reset of Placeholder text behaviour */
:focus::-webkit-input-placeholder { color: transparent; }
:focus::-moz-placeholder          { color: transparent; } /* Firefox 19+ */
:focus:-moz-placeholder           { color: transparent; } /* Firefox 18 */

These CSS-lines are making a transparent color of a placeholder text when the input field has a focus. Why we don’t have a line for Internet Explorer 11 for example? Because it has the right behaviour!

Of course in the actual project it’s better to make a mixin for a pre-processor (LESS, SASS) which will include such reset in one line, and place it to the separate file, like “mixins.less”.for example:

/* mixins.less */
/* Reset of Placeholder text behaviour */
.reset-placeholder() {
	:focus::-webkit-input-placeholder { color: transparent; }
	:focus::-moz-placeholder          { color: transparent; } /* Firefox 19+ */
	:focus:-moz-placeholder           { color: transparent; } /* Firefox 18 */
}

and use this reset, for example in “forms.less”:

/* forms.less */
/* Reset of Placeholder text behaviour */
.reset-placeholder();

The next thing is the color of a placeholder text. But not only color! For example, in Firefox some transparency is also applied for a placeholder text! So the one color for all browsers IE10+, Firefox, Chrome, Safari can be defined by several lines of CSS-code:

/* Color of Placeholder text */
::-webkit-input-placeholder       { color: #ccc; }
::-moz-placeholder                { color: #ccc; opacity: 1; } /* Firefox 19+ */
:-moz-placeholder                 { color: #ccc; opacity: 1; } /* Firefox 18 */
:-ms-input-placeholder            { color: #ccc; }
::placeholder                     { color: #ccc; }

If we are using a placeholder polyfill we should add the same color for the CSS-class placeholder, for example like this:

/* Color of Placeholder text */
.placeholder                      { color: #ccc; }

If we are using LESS, we can create a separate mixin for this:

/* mixins.less */
/* Color of Placeholder text */
.placeholder-color(@color: #ccc) {
	::-webkit-input-placeholder       { color: @color; }
	::-moz-placeholder                { color: @color; opacity: 1; } /* Firefox 19+ */
	:-moz-placeholder                 { color: @color; opacity: 1; } /* Firefox 18 */
	:-ms-input-placeholder            { color: @color; }
	::placeholder                     { color: @color; }
	.placeholder                      { color: @color; }
}

This mixin we can place in the “forms.less” for example with one line of code:

.placeholder-color(#ccc);

The final result which can be used in the real project is something like this:

This recipe works also for new branded Microsoft Edge browser because it looking for -webkit prefixes.