Style placeholder text of input fields - CSS3

Published on Feb 24, 2015 & tagged in CSS, CSS3

In default, the placeholder texts have a light gray color fonts and an ugly look according to browser default styles. But we can uniformly style these placeholder text in all modern browsers using CSS3.

To style placeholder texts, we want to use vendor prefix CSS properties.

/* all */
::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

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

:-ms-input-placeholder {  
   color: red;  
}

If you like to apply different style on each input field placeholder, just target specific input field and then apply styles on it.

/* individual: webkit */
#field1::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }

#field1::-moz-placeholder { color:#00f; }
#field2::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }

Do you need any help on CSS & CSS3?

I'm happy to help you. Just fill the form on contact page & I will get back to you within few hours.

Recent Posts

  1. The add_image_size() function - WordPress best practices
  2. Remove page title using filter - WordPress
  3. Comment out code in Liquid Template Language
  4. Remove Plugin Stylesheets and Scripts - WordPress
  5. Get blog page URL - WordPress