Tips and Tricks of Styling the HTML5 Placeholder

1.10.2015            CSS, CSS generator, How to, Scrolling

Home » CSS » Tips and Tricks of Styling the HTML5 Placeholder

The `placeholder` attribute creates a hint that describes the expected value for the `input` and `textarea` elements. In this article, we’ll try to make it more functional and convenient.

First things first. Let’s start with the basics. Here’s how you can use this attribute:

<input type="text" placeholder="Put your message here" />

And here’s the result:

![Default Placeholder](http://i.imgur.com/8DZFv4X.png “Default Placeholder”)

We’ve added some CSS code to make it look better. You can visit [this codepen page](http://codepen.io/anon/pen/rOxwjw “Codepen Example 1”) to check the code.

Here are some CSS rules that can help you change the default appearance of your placeholder:

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

Looks a little bit messy, huh? Currently this is not a part of a standard. That’s why the way of realization differs from browser to browser. In *Internet Explorer* and *Firefox* versions older than 18 `placeholder` is a pseudo-class. In the newest versions of *Firefox*, *WebKit* and *Blink* it’s a pseudo-element.

Here’s what we can get using this code:

![Placeholder + Color](http://i.imgur.com/mOOc0ku.png “Placeholder + Color”)

We must admit that the number of CSS properties you can use is limited. Here’s the list of the available ones:

– `font`
– `background`
– `color`
– `word-spacing`
– `letter-spacing`
– `text-decoration`
– `vertical-align`
– `text-transform`
– `line-height`
– `text-indent`
– `text-overflow`
– `opacity`

##If the Hint is Big Enough
Sometimes your input fields can become smaller because of the layout changes. For example, when you use a smartphone. In this case, your hint will be cropped:

![Cropped text](http://i.imgur.com/ob6Ak74.png “Cropped text”)

To prevent such behavior, you can use the `text-overflow: ellipsis` property.

Here’s the code that will work in all 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;}

Here’s the result:

![ellipsis](http://i.imgur.com/GWScbbZ.png “ellipsis”)
##Hiding the Hint when the Input Field Gets Focus
There are different events that can hide the hint:

1. When the input field gets focus
2. When you start typing

The first option looks better. Here’s the code that will enable such a behavior for all browsers:

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

##Using CSS Transitions to Hide the Hint
Let’s add some good looking effects using the `transition` property.

Here’s the recipe that will turn your hint into the vanishing one:

input::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
input::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
input:-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
input:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
input:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
input:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}

You can check the result on [this page](http://codepen.io/anon/pen/vNLQzM “Codepen Demo”).

Here’s another trick that will shift the hint to the right:

input::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
input::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
input:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
input:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
input:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
input:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
input:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}

You can [check the demo](http://codepen.io/anon/pen/zvrMmW “Codepen Demo”) if you want to.

Last but not least. Wanna now how to shift the hint down? Here you go:

input::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
input::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
input:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
input:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
input:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
input:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
input:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
input:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}

And by tradition, the [codepen page](http://codepen.io/anon/pen/bVEQQp “Codepen Demo”).

That’s all for today. Hope, you liked it.

The original text was taken from [html5.by blog](http://html5.by/blog/placeholder/ “Original”) created by [Dmitry Dudin](https://twitter.com/nedudi).

© 2018 EnjoyCSS News