Placeholder colours not working CSS - css

Question

I am trying to apply a simple colour to a specific input box. I know that we can do this:
::-webkit-input-placeholder {
color: #000000;
}
:-moz-placeholder {
color: #000000;
}
:input:-ms-input-placeholder {
color: #000000;
}
So to get it working on my input box I tried:
.search-top-container form input::-webkit-input-placeholder {
color: #000000;
}
.search-top-container form input:-moz-placeholder {
color: #000000;
}
.search-top-container form input:-ms-input-placeholder {
color: #000000;
}
But it isn't working. I tried using important tags as well but that doesn't work. Any help is much appreciated, thanks!

Answer 1

You're not saying in which browser it isn't working, but you do have an error with the Mozilla code. The latest Mozilla browsers (since v19) work only with two colons, so ::-moz-placeholder instead of :-moz-placeholder.
In addition, the default style for a placeholder contains opacity:.4, so if you want cross browser compatibility, you will have to set the opacity too. See MDN.
.search-top-container form input::-webkit-input-placeholder {
color: #F00000;
opacity: 1;
}
.search-top-container form input::-moz-placeholder {
color: #F00000;
opacity: 1;
}
.search-top-container form input:-ms-input-placeholder {
color: #F00000;
opacity: 1;
}
<div class="search-top-container">
<form>
<input placeholder="Firstname Lastname" />
</form>
</div>
(Note that in this snippet, I used red for the colour, to avoid situations where you might think it's not working because it happens to be the same colour as the default.)