19

I want to change the color of specific place holder. I'm using many input fields for my project, the problem is that in some section I need the color grey for placeholder and in some section I need the color white. Here is my code:

::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; }

But this code is implemented on all the input placeholders, and I don't need all the input placeholders in the same color.

Improve this question

3 Answers 3

Reset to default
48

You need to assign the -input-placeholder to some classname and add that class to any input you need its placeholder to have this, just like this JS Fiddle

.change::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909; } .change:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909; opacity: 1; } .change::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #909; opacity: 1; } .change:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #909; } input[type="text"]{ display:block; width:300px; padding:5px; margin-bottom:5px; font-size:1.5em; }
<input type="text" placeholder="text1" class="change"> <input type="text" placeholder="text2"> <input type="text" placeholder="text3"> <input type="text" placeholder="text4" class="change"> <input type="text" placeholder="text5">

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

1 Comment

Be careful not to set the color in your custom class. I was doing this and my custom class color was overriding the pseudo input placeholder color in FF (and IE, I think).
2

You could also use a Javascript solution without placeholder to do what you want to do. Here is the code:

//This fix allows you to change the color to whatever textcolor is while also making text go away when you click on it. However, this fix does not put the temporary placeholder back into the textarea when there is no text inside the input.
<input type="text" id="usr" value="Username" onclick="this.value = '';" style="color: red;"/> <input type="text" id="pwd" value="Password" onclick="this.value = ''; this.type = 'password';" style="color: green;"/>

Please not that this fix is a temporary placeholder and should not be used for actual login forms. I would suggest using what @Ayaz_Shah recommended in his answer.

Improve this answer

Comments

2 

 input::-moz-placeholder { color: white; } input:-moz-placeholder { color: white; font-size: 14px !important; } *::-webkit-input-placeholder { color: white; font-size: 14px !important; } *:-ms-input-placeholder { color: white; font-size: 14px !important; } *:-moz-placeholder { color: white; font-size: 14px !important; }

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.