スクロール可能な Div 内のチェックボックスで「background-color」が機能しないのはなぜですか?

CSS の「background-color」属性が

内のチェックボックスで機能しない 問い合わせで強調されている問題は、スクロール可能な div 内に囲まれたチェックボックスに影響を与える「background-color」属性。 「margin-top」などの属性は期待どおりに機能しますが、「background-color」は無効なままです。

この動作を理解するには、チェックボックスが親要素から背景色を継承することに注意することが重要です。デフォルトでは、チェックボックスの基本背景色はブラウザのスタイルによって異なります。したがって、チェックボックス自体の背景色を直接設定することはできません。

目的の効果を提供するには、目的の背景色を持つ div 要素内で各チェックボックスをラップするという代替アプローチを採用できます。このように、div 要素はチェックボックスを保持し、背景色を設定するためのプロキシとして機能します。例:

<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div><pre class="brush:php;toolbar:false">.evenRow {
    background-color: #9FFF9D;
}

.oddRow {
    background-color: #ffffff;
}

以上がスクロール可能な Div 内のチェックボックスで「background-color」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。