Style HTML5 placeholder text using CSS [input and textarea]

Before HTML5, there was XHTML1 and before that HTML4. Placeholders as we know them today were in XHTML1 and HTML4 simulated with JavaScript. Styling these simulated placeholders was easy because they actually were input value’s. Now that placeholders are integrated in HTML5, these JavaScript placeholders are redundant, but styling these HTML5 placeholders got a lot harder than styling JavaScript placeholders, especially when you want the HTML5 placeholder styles to be cross-browser applied. This tutorial will show you exactly how to style a HTML5 placeholder text using CSS only, for both input elements as textarea elements. Important to know before you use any of the below code fragments, is that major browsers like Chrome, FireFox, Safari, Opera and Internet Explorer / Edge each employ a different pattern for styling input placeholders and textarea placeholders.

Create a HTML5 input and textarea with placeholder

Let’s first show the HTML5 markup needed to create an input field and a textarea field that both have a placeholder text. Both of the below fields will have a placeholder example text, on which the default browser style provided by the browser you’re using will be applied:

Style HTML5 placeholder text using CSS

As said before, major browsers each employ a different pattern for styling input and textarea placeholders. Therefor we’ll need to create a separate CSS rule for each browser. You have the choice to target all placeholders on your website at once, only target specific elements, only target a specific form elements, only target specific input types, only target inputs that contain a placeholder, only target elements containing a specific class or only target elements containing a specific ID. Below you’ll find CSS rules for all various targeting options:

Target each placeholder text:

Target each input placeholder text:

Target each textarea placeholder text:

Target placeholder texts from all inputs from a certain type:

Target placeholder texts from all inputs that have the placeholder attribute:

Target form elements with a specific class (the class in this example is: “classname”):

Target form elements with a specific ID (the ID in this example is: “idname”):

The above CSS rules reveal that there are two ways on targeting input and textarea placeholder texts, via pseudo-elements (::) and pseudo-classes (:). The various major browsers support pseudo-elements or pseudo-classes, but they never support both which makes it important to use each of the above CSS rule in order to apply your desired styles in each browser.The list of supported CSS properties for pseudo-elements is getting bigger and bigger, they are listed below. Keep in mind that the below CSS properties mostly don’t work on pseudo-classes because pseudo-classes simply don’t support much CSS properties.

Supported CSS properties for placeholders

The following CSS properties for pseudo-elements (::) are supported by most major browsers:

• color
• word-spacing
• letter-spacing
• vertical-align
• line-height
• padding-properties
• font-properties
• text-properties
• border-properties
• background-properties
• position-properties
• transform-properties
• opacity - FireFox automatically reduces the placeholder opacity, so you’ll need to add opacity:1; (as you can see in the above examples).

 

Important: Also style input- and textarea texts, not only the placeholders

It is important to realize that styling placeholder texts won’t also style the input/textarea texts. As soon as you start typing in a input- or textarea field, the input/textarea text will appear and default browser styles will be applied to these texts. Therefore, always make sure you first style the normal input and textarea texts, and then style the placeholders. For example:

Placeholder too big for input field?

Placeholders can be too big for an input field (the input width is too small for the placeholder text). This can happen with default input fields, but also when a layout breaks down for responsive behavior and the width of input fields is reduced which results in a placeholder text that is larger than the input width. To solve this, make sure you add text-overflow:ellipsis; to the placeholder texts so the part of the placeholder text that doesn’t fit in the input field is cut off. Use the following CSS rules to apply this:

Disable the placeholder when you click (focus) on an input field or textarea

The default behavior of placeholder texts when you click/focus on an input/textarea is the placeholder texts remain visible until you start typing. To make sure the placeholder text disappears as soon as you click/focus on an input or textarea is by making the placeholder text color transparent. The following CSS rules will entirely hide the placeholder text on focus/click:

Placeholder browser compatibility

HTML5 placeholders are supported by the latest versions of all major browsers. The below CSS rules target all up-to-date major browsers, and as much older browsers as possible, but there are limitations. Take for example older versions of Internet Explorer (IE9 and older), that don’t support placeholders at all, or older versions of Opera, that don’t support CSS selectors for placeholders. If you make sure you use all the following CSS rules, the placeholder texts will look great in all major browsers, and in most of the older browsers:

::-webkit-input-placeholder - WebKit, Blink, Edge
:-moz-placeholder - Mozilla Firefox 4 to 18
::-moz-placeholder - Mozilla Firefox 19+
:-ms-input-placeholder - Internet Explorer 10-11
:placeholder-shown - Standard Pseudo-class

There are some browsers that already support the new HTML5 input types, like ‘email’, ‘url’ or ‘tel’. Not all browsers support these new input types and when they not support them, these input types will automatically be converted to the input type ‘text’. Among the browsers that do support these new HTML5 input types, there are browsers that support these input types, but add some additional default CSS which will render these inputs in strange ways. To avoid this, always make sure you set the appearance to ‘textfield’ so each browser will render these new HTML5 input types as text fields: