Styling HTML5 Form Input Placeholder with Css

Question

I have your basic input with a placeholder. I have the placeholder text color as a light gray. However, when I click inside the input and type something, the color stays the same. Is there a way I can change the color of the text when something is type and when it is not typed?

<input type="text" placeholder="Your Name">

DF_ · Accepted Answer · 2013-03-19 18:03:03Z

2

Unfortunately there is no native way just yet to do this that covers all the browsers. You can use vendor specific css rules however as seen in this jsfiddle.

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

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

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

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

answered Mar 19, 2013 at 18:03

DF_

4,04327 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

alyus Over a year ago

Thanks for the input. Appreciate it. Would jQuery be the best solution?

DF_ Over a year ago

It depends on how important supporting old versions of Firefox and IE are. If it's important, then yeah you could use a modernizer class and a small jQuery function to fake one with your own styles. Use any of the solutions on google - it seems everyone and their dog has made a jQuery placeholder plugin. If you're only supporting latest versions of browsers, then vendor specific css rules like the above is fine.

alyus Over a year ago

Great! Thanks for taking time out to help.

Collectives™ on Stack Overflow

Styling HTML5 Form Input Placeholder with Css

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related