CODEWITHSUNDEEP
htmlcss
d512
d512

Reputation: 34083

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?

Upvotes: 10

Views: 34654

Answers (3)

SlightlyCuban
SlightlyCuban

Reputation: 3255

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.

Upvotes: 24

Pevara
Pevara

Reputation: 14310

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>

Upvotes: 5

Mark
Mark

Reputation: 2221

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/

Upvotes: 6

Related Questions