web-dev-qa-db-ja.com

IE 11で適用されていないプレースホルダーCSS

プレースホルダーCSSの適用で問題が発生しています。

Cssを適用しようとしています（つまり、color:#898F9C;）擬似クラスセレクターを使用した入力ボックスプレースホルダー :-ms-input-placeholder 、ただしIEでは機能しません。

デモ

いくつか試してみたところ、問題の解決策が得られましたが、それは驚くべきことです。

入力ボックスのデフォルトのCSS /スタイルの色を削除すると、IEで適切に動作するプレースホルダーCSS（Internet Explorerの驚くべき動作です）.

私のデフォルトのCSS /スタイル：

#search
{
    color:blue;
}

入力ボックスのデフォルトcssなしの作業フィドル

私の質問は、なぜIEのデフォルトCSSで動作しないのですか？

internet-explorerplaceholderinternet-explorer-11pseudo-class
36
Ishan Jain

Raj answered に加えて、ベンダープレフィックスを使用する場合、セレクターをプレフィックスごとに独自のルールセットに分ける必要があります。

この理由は、CSS言語を進化させるために、ブラウザーが理解できないセレクターまたは宣言をドロップする必要があるためです。これにより、古いブラウザが単にドロップするのとは異なる方法で解釈することを心配せずに、新しい機能を追加できます。

コンマコンビネータを使用してさまざまな擬似クラスを組み合わせる場合、1つのセレクタに変換します。ブラウザは、ルールセットを適用するためにすべてを理解する必要があります。

代わりに、各ベンダーのプレフィックスの擬似クラス/要素に新しいルールセットを作成する必要があります。残念ながら、それは多くの繰り返しですが、それは実験的なCSSを使用するための価格です。

22
David Storey

一般に、プレースホルダーをスタイリングするとき

サポートされていないベンダープレフィックスに遭遇すると、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フラグを必要とするようです。

CanIUseでブラウザのサポートを確認

特定の問題の解決策

あなたの例では、IE11用のこれらのルールセットが必要になります：

#search:-ms-input-placeholder {
    color: #898F9C !important; /* IE11 needs the !important flag */
}

/* (...) Other vendor prefixed rulesets omitted for brevity */

#search::placeholder {
    color: #898F9C;
}
79
Lars Gyrup Brink Nielsen

定義を分離する必要があります。

例えば：

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

20
Raj Parmar

誰かがfont-sizeを変更できないためにここに来た場合-現在、プレースホルダーのfont-sizeはIEおよびEdjeでサポートされていません。修正する予定はないようです。 問題＃11342294

1
jonathana