2017-07-07 23 views
3

私はID #oneで入力要素に次のルールを適用する場合は、プレースホルダの色が変わる、なぜカンマ区切りのプレースホルダルールがCSSに適用されないのですか?

#one::-webkit-input-placeholder { 
    color: red; 
} 

しかし、私は別のブラウザのプレースホルダーのルールを組み合わせるために、コンマの区切りを使用した場合、色が適用されません、例えば

#two::-webkit-input-placeholder, 
#two::-moz-placeholder{ 
    color: red; 
} 

の作業例:

#one::-webkit-input-placeholder { 
 
    color: red; 
 
} 
 

 
#two::-webkit-input-placeholder, 
 
#two::-moz-placeholder{ 
 
    color: red; 
 
}
<input id="one" type="text" placeholder="one"> 
 
<input id="two" type="text" placeholder="two">

なぜ#twoプレースホルダが赤にその色を変更しませんか?

答えて

3

これは、ブラウザが完全に解釈できるセレクタのルールフォームのみを適用するためです。
ウェブキット型のブラウザ-webkit-input-placeholderは有効ですが、-moz-placeholderはそうではないため、セレクタ全体がゴミ箱になり、geekoベースのブラウザでは逆になります。
解決策は、ブラウザ固有のセレクタを分離することです。

#two::-webkit-input-placeholder{ 
    color: red; 
} 
#two::-moz-placeholder{ 
    color: red; 
} 
0

私は今完全な答えですけど、私はこれを行う必要がありますなぜあなたは、各入力

#one::-webkit-input-placeholder { 
 
    color: red; 
 
} 
 

 

 

 
#two::-webkit-input-placeholder{ 
 
    color: red; 
 
} 
 
#two::-moz-placeholder{ 
 
    color: red; 
 
}
<input id="one" type="text" placeholder="one"> 
 
<input id="two" type="text" placeholder="two">

+0

のための別のクラスを追加することができますか? – user31782

+0

Musaは正しい答えと説明を持っています。私は影のドームを調べ、すべてが期待どおりに働いています –

関連する問題