Styling placeholders with CSS. Syntax, tips & tricks, supported HTML5 styles

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.


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

If placeholder does not fit

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;

How to hide a placehoder on focus?

Hiding the placeholder is not consistent across browsers.

  1. In some browsers, it happens when input field is focused
  2. 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

Hiding the placeholder in a nice way

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.


Other Popular Articles