Multiple styles for input placeholder text

Question

I want to style my input box placeholder text, which I am doing like this:

::-webkit-input-placeholder { font-size: 16pt; color: #555; }
::-moz-placeholder { font-size: 16pt; color: #555; }
:-ms-input-placeholder { font-size: 16pt; color: #555; }
input:-moz-placeholder { font-size: 16pt; color: #555; }

But I have scenarios where different placeholders require different styles like this:

Is this possible to do? I can't seem to successfully combined the css above with classes or and other type of element selector. All the tutorials I've found stop at just setting the placeholder text once and don't get into having multiple placeholder stylings. Is that a global setting?

Answer 1

You have to combine the class with the pseudo element, and then you can apply a class to the input elements:

 input::-webkit-input-placeholder { font-size: 16pt; color: #555; } input::-moz-placeholder { font-size: 16pt; color: #555; } input:-ms-input-placeholder { font-size: 16pt; color: #555; } input:-moz-placeholder { font-size: 16pt; color: #555; } input.other::-webkit-input-placeholder { font-size: 12pt; color: red; } input.other::-moz-placeholder { font-size: 12pt; color: red; } input.other:-ms-input-placeholder { font-size: 12pt; color: red; } input.other:-moz-placeholder { font-size: 12pt; color: red; } 

 <input type="text" placeholder="Hello"></input> <input type="text" class="other" placeholder="Hello"></input> 

Note: I added the input here for clarity and correctness.

Fiddle

Remember, the pseudo selectors aren't real elements on the page, but attached to some other element. Combine them with some other element selector to match something more specific.

Answer 2

Use classes on your inputs should work. Have you tried the below:

 /* WebKit browsers */ input.myClassNameOne::-webkit-input-placeholder { font-size: 16pt; color: #555; } /* Mozilla Firefox 4 to 18 */ input.myClassNameOne:-moz-placeholder { font-size: 16pt; color: #555; } /* Mozilla Firefox 19+ */ input.myClassNameOne::-moz-placeholder { font-size: 16pt; color: #555; } /* Internet Explorer 10+ */ input.myClassNameOne:-ms-input-placeholder { font-size: 16pt; color: #555; } 

 <input type="text" class="myClassNameOne" placeholder="test input" /> <input type="text" class="myClassNameTwo" placeholder="test input" /> 

JSFiddle: http://jsfiddle.net/markwylde/fFLL7/1/

Answer 3

Though the other answers are correct, I would like to note that you do not need to apply the class directly to the input. You could also apply it to some parent wrapper, and slightly modify the suggested CSS to achieve the same result, which is perhaps easier as you may need to do less modifying on your HTML.

An example (also see fiddle ):

 .default ::-webkit-input-placeholder { font-size: 16pt; color: #555; } .default ::-moz-placeholder { font-size: 16pt; color: #555; } .default :-ms-input-placeholder { font-size: 16pt; color: #555; } .default input:-moz-placeholder { font-size: 16pt; color: #555; } .other ::-webkit-input-placeholder { font-size: 12pt; color: red; } .other ::-moz-placeholder { font-size: 12pt; color: red; } .other :-ms-input-placeholder { font-size: 12pt; color: red; } .other input:-moz-placeholder { font-size: 12pt; color: red; } 

 <div class='default'> <input placeholder='default'/> <input placeholder='default'/> <input placeholder='default'/> </div> <div class='other'> <input placeholder='other'/> <input placeholder='other'/> <input placeholder='other'/> </div>