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

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>