Skip to content

Placeholder styling with CSS

Last updated on February 25, 2018

By default, placeholder text in inputs has a light gray color(if the browsers support) and which appears in an input field until the user puts focus on the field. Placeholder text is a hint or prompts to users as the format or type of information they need to enter. You will need vendor prefix CSS properties which enables you to style the placeholders however you want.

The Following properties you can use on input-placeholder:

  • color
  • font-size
  • font-style
  • font-weight
  • letter-spacing
  • line-height
  • padding
  • text-align
  • text-decoration

Be aware that these cannot be combined so must be written out individually.

/* all */
::-webkit-input-placeholder { /* Webkit */
   color: orange;

:-moz-placeholder { /* Firefox 18-4 */
   color: orange;  

::-moz-placeholder {  /* Firefox 19+ */
   color: orange;  

:-ms-input-placeholder {  /*  IE10+  */
   color: orange;  

The above lines will change all of your placeholder text colors to ‘orange’, if you want to apply individual styles, you can do that too as shown below

.field::-webkit-input-placeholder {  color: green;   }
.field:-moz-placeholder { color: green; }
.field::-moz-placeholder { color: green; }
.field::-ms-input-placeholder { color: green; }

.field2::-webkit-input-placeholder {  color: red;   }
.field2:-moz-placeholder { color: red; }
.field2::-moz-placeholder { color: red; }
.field2::-ms-input-placeholder { color: red; }

You may need to add in the !important declaration to override some of the browser’s settings.

Browser Support

The ::input-placeholder pseudo-element is currently supported in Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and IE10. Firefox supports both a pseudo-element and a pseudo-class for older versions of Firefox.

For older browser by including a polyfil javascript you can get browsers support.

Reference links

0 0 votes
Article Rating
Notify of

1 Comment
Most Voted
Newest Oldest
Inline Feedbacks
View all comments