Placeholder attribute is used to provide an action hint inside empty elements such as input or textarea. In this article, we consider the possibility of styling the placeholder text as well as some tricks to make it more usable and functional.

Let's begin with an example for those who don't know what a placeholder is.

<input type="text" placeholder="Leave message here">

Placeholder styles can be modified with the following CSS rules:

::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;} /* Firefox 19+ */ :-moz-placeholder {color:#c0392b;} /* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;}

Looks scary, doesn't it? In fact, it's not standartized yet. Each browser implements placeholder styling in its own way.

In IE and old Firefox (till ver. 18) placeholder is considered a pseudo-class whereas in the new Firefox, Webkit, and Blink, it is a pseudo-element.

Let's see what happens:

Not all CSS properties are fully supported. Most modern browsers would allow you to change:

font (and related properties) background (and related properties) color word-spacing letter-spacing text-decoration vertical-align text-transform line-height text-indent text-overflow opacity

Sometimes the width of a text input gets reduced (depending on the layout), especially on mobile devices. In this case, the placeholder text will be cut off if it's too long. It looks ugly :) To prevent this, one can use text-overflow: ellipsis . This syntax works in all modern browsers.

input[placeholder] {text-overflow:ellipsis;} input::-moz-placeholder {text-overflow:ellipsis;} input:-moz-placeholder {text-overflow:ellipsis;} input:-ms-input-placeholder {text-overflow:ellipsis;}

Without text-overflow: ellipsis;





With text-overflow: ellipsis;



Hiding the placeholder is not consistent across browsers.

In some browsers, it happens when input field is focused In other browsers, it only happens after at least one character is entered

I like the first option. To implement this behavior in all browsers that support placeholders, define the following CSS rules:

:focus::-webkit-input-placeholder {color: transparent} :focus::-moz-placeholder {color: transparent} :focus:-moz-placeholder {color: transparent} :focus:-ms-input-placeholder {color: transparent}

Placeholder hides itself on focus



You can add a transition for showing and hiding a placeholder:

Fadeouts of a placeholder in focus

Shift a placeholder in focus right

Shift a placeholder in focus down



Here is the CSS:

/* fadeouts of placeholder in focus */ .input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;} .input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;} .input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;} /* shift right placeholder in focus */ .input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;} .input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} .input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;} /* shift down placeholder in focus */ .input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;} .input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;} .input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}

I hope you find it useful. Please leave your comments and suggestions below.