Warum wird die Hintergrundfarbe nicht auf Kontrollkästchen in einem scrollbaren Div angewendet?

CSS-Attribut „Hintergrundfarbe“ mit Kontrollkästchen in einem Div

Obwohl das Attribut „Hintergrundfarbe“ in CSS für Kontrollkästchen festgelegt wurde Innerhalb eines scrollbaren Div wird die Änderung der Hintergrundfarbe nicht angewendet. Andere Attribute wie „margin-top“ funktionieren jedoch wie erwartet.

Der vom Benutzer bereitgestellte HTML- und CSS-Code ist wie folgt folgt:

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

Erklärung:

Das Problem entsteht, weil Kontrollkästchen das Attribut „Hintergrundfarbe“ nicht nativ unterstützen. Um den gewünschten visuellen Effekt zu erzielen, müssen Sie jedes Kontrollkästchen in ein div-Element einschließen und stattdessen die Farbe diesem div zuweisen.

Überarbeitetes HTML:

<div>

Überarbeitetes CSS:

.listContainer {
    /* Same as before */
}

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

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

.oddRow {
    background-color: #ffffff;
}

Das obige ist der detaillierte Inhalt vonWarum wird die Hintergrundfarbe nicht auf Kontrollkästchen in einem scrollbaren Div angewendet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!