CODEWITHSUNDEEP
htmlcss
user2924127
user2924127

Reputation: 6252

placeholder styling - override style that uses !important

I need to change the style of the placeholder in my framework. I need to override the instyle placeholder style the framework inserts for me. To do this I inserted the following code:

::-webkit-input-placeholder { color:#FFFF00 !important;}
::-moz-placeholder { color:#FFFF00 !important; } /* firefox 19+ */
:-ms-input-placeholder { color:#FFFF00 !important; } /* ie */
input:-moz-placeholder { color:#FFFF00 !important;}

This works and makes all placeholders this style. The problem is I need for fields with one class to be another color. To do this I did:

 ::-webkit-input-placeholder .my_class { color:#000000!important;}
    ::-moz-placeholder .my_class  { color:#000000!important; } /* firefox 19+ */
    :-ms-input-placeholder .my_class  { color:#FFFF000 !important; } /* ie */
    input:-moz-placeholder .my_class  { color:#000000!important;}

This does not work though. The placeholders are still #FFFF00. How can I accomplish this?

Upvotes: 1

Views: 335

Answers (2)

Giuseppe
Giuseppe

Reputation: 876

put .my_class before the ::-x-placeholder pseudo elements

input {background:red;}/*added for contrast */


::-webkit-input-placeholder { color:#FFFF00 !important;}
::-moz-placeholder { color:#FFFF00 !important; } /* firefox 19+ */
:-ms-input-placeholder { color:#FFFF00 !important; } /* ie */
input:-moz-placeholder { color:#FFFF00 !important;}

.my_class::-webkit-input-placeholder  { color:#000000!important;}
.my_class::-moz-placeholder   { color:#000000!important; } /* firefox 19+ */
.my_class:-ms-input-placeholder  { color:#FFFF000 !important; } /* ie */
input.my_class:-moz-placeholder   { color:#000000!important;}
<input placeholder="test"/>
<input placeholder="test" class="my_class"/>

Upvotes: 1

Shoeb Mirza
Shoeb Mirza

Reputation: 918

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

.my_class::-webkit-input-placeholder {
    color: blue! important;
}

Upvotes: 0

Related Questions