スクロール可能な 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>

.evenRow {
    background-color: #9FFF9D;
}

.oddRow {
    background-color: #ffffff;
}

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