プレースホルダーCSSの適用で問題が発生しています。
Cssを適用しようとしています(つまり、color:#898F9C;
)擬似クラスセレクターを使用した入力ボックスプレースホルダー :-ms-input-placeholder
、ただしIEでは機能しません。
いくつか試してみたところ、問題の解決策が得られましたが、それは驚くべきことです。
入力ボックスのデフォルトのCSS /スタイルの色を削除すると、IEで適切に動作するプレースホルダーCSS(Internet Explorerの驚くべき動作です).
私のデフォルトのCSS /スタイル:
#search
{
color:blue;
}
私の質問は、なぜIEのデフォルトCSSで動作しないのですか?
Raj answered に加えて、ベンダープレフィックスを使用する場合、セレクターをプレフィックスごとに独自のルールセットに分ける必要があります。
この理由は、CSS言語を進化させるために、ブラウザーが理解できないセレクターまたは宣言をドロップする必要があるためです。これにより、古いブラウザが単にドロップするのとは異なる方法で解釈することを心配せずに、新しい機能を追加できます。
コンマコンビネータを使用してさまざまな擬似クラスを組み合わせる場合、1つのセレクタに変換します。ブラウザは、ルールセットを適用するためにすべてを理解する必要があります。
代わりに、各ベンダーのプレフィックスの擬似クラス/要素に新しいルールセットを作成する必要があります。残念ながら、それは多くの繰り返しですが、それは実験的なCSSを使用するための価格です。
サポートされていないベンダープレフィックスに遭遇すると、CSS解析エンジンはルール全体を無効と見なします。そのため、各ベンダープレフィックスに個別のルールセットが必要です。さらに、IE11ではデフォルトのユーザーエージェントスタイルをオーバーライドするために!important
フラグが必要であることがわかりました。
/* - Chrome ≤56,
- Safari 5-10.0
- iOS Safari 4.2-10.2
- Opera 15-43
- Opera Mobile 12-12.1
- Android Browser 2.1-4.4.4
- Samsung Internet ≤6.2
- QQ Browser */
::-webkit-input-placeholder {
color: #ccc;
font-weight: 400;
}
/* Firefox 4-18 */
:-moz-placeholder {
color: #ccc;
font-weight: 400;
}
/* Firefox 19-50 */
::-moz-placeholder {
color: #ccc;
font-weight: 400;
}
/* - Internet Explorer 10–11
- Internet Explorer Mobile 10-11 */
:-ms-input-placeholder {
color: #ccc !important;
font-weight: 400 !important;
}
/* Edge (also supports ::-webkit-input-placeholder) */
::-ms-input-placeholder {
color: #ccc;
font-weight: 400;
}
/* CSS Pseudo-Elements Level 4 Editor's Draft
- Browsers not mentioned in vendor prefixes
- Browser of newer versions than mentioned in vendor prefixes */
::placeholder {
color: #ccc;
font-weight: 400;
}
IE11のみが!important
フラグを必要とするようです。
あなたの例では、IE11用のこれらのルールセットが必要になります:
#search:-ms-input-placeholder {
color: #898F9C !important; /* IE11 needs the !important flag */
}
/* (...) Other vendor prefixed rulesets omitted for brevity */
#search::placeholder {
color: #898F9C;
}
定義を分離する必要があります。
例えば:
#search
{
color:blue;
}
#search::-webkit-input-placeholder {
color: red;
}
#search:-moz-placeholder {
color: red;
}
#search::-moz-p {
color: red;
}
#search:-ms-input-placeholder {
color: red;
}
こちらをご覧ください: http://jsfiddle.net/DLGFK/203/
誰かがfont-size
を変更できないためにここに来た場合-現在、プレースホルダーのfont-size
はIEおよびEdjeでサポートされていません。修正する予定はないようです。 問題#11342294