Design Quick Tip: Input Placeholder CSS

  • follow us in feedly
Published November 6, 2013 by Brad Knutson
Design Quick Tip: Input Placeholder CSS

I’ve been really busy lately working a bunch of projects, so I haven’t had time to blog much lately. So, instead of a long winded post, tonight I thought I would provide you with a solution to a surprisingly common web design problem.

When designing sites for clients, one of the most common things I come across is a contact form or an email subscription form. Regardless of what type of form it is, there is always an input element. The problem is that the default CSS for input elements are soooo boring!

So, as designers we try to spice up our forms by getting rid of the border, changing the background color, and so on and so forth.

But what about changing the placeholder text color? Have you tried to do this before? If you’re like me, you probably thought you could change the text color and the placeholder text would change also. This isn’t the case.

So what is the solution?


::-webkit-input-placeholder {
   color: red;
:-moz-placeholder { /* Firefox 18 and older */
   color: red;
::-moz-placeholder {  /* Firefox 19+ */
   color: red;
:-ms-input-placeholder {
   color: red;

The Longer Explanation

Thankfully, there are vendor prefix CSS properties for webkit browsers, Firefox and Internet Explorer. We have to use each of these separately however, because if we try to use them like below:

::-webkit-input-placeholder, :-moz-placeholder, ::-moz-placeholder, :-ms-input-placeholder {
   color: red;

This won’t work – because each browser will fail and skip the line. Each vendor prefix property must be on a separate line for this to work properly.

At any rate – short post today – just sharing a quick CSS tip!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date



See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">