プレースホルダスタイリング - ！importantを使用するオーバーライドスタイル

Question

フレームワーク内のプレースホルダのスタイルを変更する必要があります。フレームワークが私のために挿入するスタイルのプレースホルダースタイルをオーバーライドする必要があります。これを行うには、次のコードを挿入しました。

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

これはすべてのプレースホルダーをこのように動作させます。問題は、あるクラスのフィールドが別の色になるために必要なことです。これを行うには、私はした：

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

これは動作しません。プレースホルダはまだ＃FFFF00です。どうすればこれを達成できますか？あなただけのオリジナルの文を編集したりした後、それを繰り返す、！ `important`を使用しているのはなぜ

Answer 1

は::-x-placeholder擬似要素

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"/>

Answer 2

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

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