CODEWITHSUNDEEP
htmlcss
user2952265
user2952265

Reputation: 1630

CSS - Cannot change placeholder color by class

I'm working with a project where the placeholder color was defined globally by developer. But now I need to style a form with a different placeholder color. How can I address it correctly?

js fiddle

CSS

::-webkit-input-placeholder {
color: red;
}
:-moz-placeholder {
color: red;

}
::-moz-placeholder {
color: red;

}
:-ms-input-placeholder {
color: red;

}


.box input::-webkit-input-placeholder, .box textarea::-webkit-input-placeholder {
  color: blue;
}
.box input:-moz-placeholder, .box textarea:-moz-placeholder {
  color: blue;
}
.box input:-ms-input-placeholder, .box textarea:-ms-input-placeholder{
  color: blue;
}

Upvotes: 10

Views: 37830

Answers (4)

Giriprasad Yedulla
Giriprasad Yedulla

Reputation: 1

This worked for me

-webkit-text-fill-color: white;
opacity: 1;

Just add it in the input/text area tag directly

eg. https://codepen.io/anon/pen/LqgOOp

Upvotes: 0

Michael Schmidt
Michael Schmidt

Reputation: 9230

You can reach your target in several solutions.

In the first one, you should change your HTML markup. With your CSS, you first search for the class "box", and the for the input element. So the working HTML markup would be: 

<span class="box"><input /></span>

While the span element could be any other element, it should just have the box as class.
Demo 1

The second solution is to write the input (and also textarea) in your CSS in front of the .box element. So you call only input and textarea elements which have the "box" class. 

input.box::-webkit-input-placeholder, textarea.box::-webkit-input-placeholder {
  color: blue;
}

Demo 2

The last solution is to delete the input and the textarea part. So you'll call all elements, which have "box" as a class. 

.box::-webkit-input-placeholder {
  color: blue;
}

Demo 3

Upvotes: 1

Ruddy
Ruddy

Reputation: 9923

Simply because I think the other answer by Filip Huysmans was just copied from Vucko's comment. I am going to also answer it and explain why your code didn't work.

Lets use this one as an example:

.box input::-webkit-input-placeholder {
  color: blue;
}

Here you are selecting .box and then trying to find an input to change the placeholder colour. If your code was like this:

<div class="box">
    <input placeholder="blue" />
</div>

It would have worked. In the code above you are selecting the class .box and then finding all inputs within it.

DEMO HERE

Now in your code we have:

<input class="box" placeholder="blue" />

So you are already in the input, thats why your code didnt work. There is no input in the input. So taking away input from the CSS and leaving just .box means you are selecting just that input.

.box::-webkit-input-placeholder

DEMO HERE

Hope this explains it well enough for you to understand where you went wrong.

Upvotes: 1

Filip Huysmans
Filip Huysmans

Reputation: 1341

Try this code:

http://jsfiddle.net/vyDns/3/

you where close only needed to add .box in front like:

 .box::-moz-placeholder

Cheers

Upvotes: 26

Related Questions