CODEWITHSUNDEEP
cssplaceholder
thairish
thairish

Reputation: 1053

Placeholder colours not working CSS

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!

Upvotes: 0

Views: 1307

Answers (1)

Mr Lister
Mr Lister

Reputation: 46629

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.)

Upvotes: 1

Related Questions