user1334007 user1334007 - 1 year ago 87
CSS Question

Multiple styles for input placeholder text

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:

enter image description here
enter image description here

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 Source

You have to combine the class with the pseudo element (I added the input here for clarity and correctness), 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>


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.