スクロール可能な Div のチェックボックスに背景色が適用されないのはなぜですか?

Div 内のチェックボックスに関する CSS 'background-color' 属性の問題

CSS でチェックボックスの 'background-color' 属性を設定しているにもかかわらずスクロール可能な div 内では、背景色の変更は適用されません。ただし、「margin-top」などの他の属性は期待どおりに機能します。

ユーザーが指定した HTML および CSS コードは次のとおりです。以下:

HTML:

<div>
<p><strong>CSS:</strong></p>
<pre class="brush:php;toolbar:false">.listContainer {
    border:2px solid #ccc;
    width:340px;
    height: 225px;
    overflow-y: scroll;
    margin-top: 20px;
    padding-left: 10px;
}

.oddRow {
    margin-top: 5px;
    background-color: #ffffff;
}

.evenRow{
    margin-top: 5px;
    background-color: #9FFF9D;
}

説明:

この問題は、チェックボックスがネイティブでサポートしていないために発生します。 「背景色」属性。目的の視覚効果を作成するには、各チェックボックスを div 要素内でラップし、代わりにその div に色を割り当てる必要があります。

改訂版 HTML:

<div>
<p><strong>改訂された CSS:</strong></p>
<pre class="brush:php;toolbar:false">.listContainer {
    /* Same as before */
}

.oddRow, .evenRow {
    /* Remove incorrect background-color */
}

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

.oddRow {
    background-color: #ffffff;
}