Why Doesn\'t Background Color Apply to Checkboxes in a Scrollable Div?

CSS 'background-color' Attribute Issue with Checkboxes in a Div

Despite setting the 'background-color' attribute in CSS for checkboxes within a scrollable div, the background color modification is not being applied. However, other attributes like 'margin-top' work as expected.

The HTML and CSS code the user provided is as follows:

HTML:

<div>

CSS:

.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;
}

Explanation:

The issue arises because checkboxes do not natively support the 'background-color' attribute. To create the desired visual effect, you must wrap each checkbox within a div element and assign the color to that div instead.

Revised HTML:

<div>

Revised CSS:

.listContainer {
    /* Same as before */
}

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

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

.oddRow {
    background-color: #ffffff;
}

The above is the detailed content of Why Doesn\'t Background Color Apply to Checkboxes in a Scrollable Div?. For more information, please follow other related articles on the PHP Chinese website!