web-dev-qa-db-ja.com

背景色：継承はIE 8/9/10の入力要素では機能しません

明示的な背景色が設定されたdivがあり、その中にinput要素があり、background-colorが 'inherit'に設定されている場合、Chrome、Firefox、Safariでは期待どおりに機能しますが、IE 8、9、または10。

問題を説明する最小限の例を次に示します。 jsbin example

テキストボックスの背景色は同じである必要があります。 divにカーソルを合わせると、divの背景色が変わり、入力も変わるはずです。入力をクリックすると、継承をオーバーライドする：focusルールがあります。

cssinternet-explorerinternet-explorer-8
21
Elbin

次のCSSを使用して、必要な効果を得ることができました。

div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: transparent;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}

何らかの理由で、IE10の背景色プロパティを使用した継承は、他のブラウザーとは異なる方法で実装されているようです。

背景色をtransparentではなくinheritに設定するとうまくいくようです。

結果はデモで見ることができます： http://jsfiddle.net/audetwebdesign/kTM2f/

もっと良い説明があればいいのですが、少なくとも回避策はあります。

IE8のバグ

次の関連する質問を読みました。

背景が透明な入力ボックスはIE8ではクリックできません

設定background-color: transparent入力フィールドで、IE8の入力フィールドが無効になっているようです。

その場合、CSSはより明示的なバージョンである必要があります。

div.container {
    margin: 50px;
    padding: 10px;
    background-color: #aaa;
}
div.container input {
    background-color: #aaa;
    border-width: 0;
}
div.container:hover {
    background-color: yellow;
}
div.container:hover input {
    background-color: yellow;
}
div.container input:focus {
    background-color: white;
}
18
Marc Audet

Background-color：transparentは許容できる解決策ではありませんか？

9
Ilya Streltsyn

ルールプロパティに!importantを追加します。

input {
  background-color: inherit !important;
  border-width: 0;
}
0
anonym