스크롤 가능한 Div의 체크박스에 배경색이 적용되지 않는 이유는 무엇입니까?

Div의 체크박스에 대한 CSS '배경색' 속성 문제

체크박스에 대한 CSS의 '배경색' 속성을 설정했음에도 불구하고 스크롤 가능한 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;
}