CSS - Cannot change placeholder color by class

Question

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;
}

Answer 1

Try this code:

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

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

 .box::-moz-placeholder

Cheers