Geek Answers Handbook

CSS - Unable to change placeholder color by class

I am working on a project where a color placeholder has been defined globally by the developer. But now I need to create a form with a different placeholder color. How can I solve it correctly?

js violin

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;
}
+4
source share
3 answers

Try this code:

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

you where close, you only need to add .box in front, for example:

 .box::-moz-placeholder

Greetings

+12
source

You can achieve your goal in several decisions.

In the first case, you must change your HTML markup. Using your CSS, you are first looking for the "box" class, and for the input element. Thus, the working HTML markup will look like this:

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

span , .
1

, ( textarea) CSS .box. , textarea, "box".

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

2

- textarea. , "" .

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

3

+1

, , Vucko. , .

:

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

.box, input, . :

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

. .box, inputs .

:

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

So, you are already in input, so your code did not work. In inputno input. So taking away inputfrom CSS and leaving only .boxmeans that you are choosing exactly that input.

.box::-webkit-input-placeholder

DEMO HERE

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

+1
source

More articles:


All Articles