Warum ändert sich die Hintergrundfarbe meines Kontrollkästchens in einem scrollenden DIV nicht?

CSS-Attribut „Hintergrundfarbe“ funktioniert nicht bei Kontrollkästchen innerhalb von

Beim Versuch, eine Hintergrundfarbe auf enthaltene Kontrollkästchen anzuwenden Beim Scrollen von

können Benutzer auf ein Problem stoßen, bei dem das Attribut „Hintergrundfarbe“ scheinbar keine Wirkung hat. Paradoxerweise funktionieren andere CSS-Attribute wie „margin-top“ wie erwartet.

Diese Diskrepanz entsteht, weil Kontrollkästchen von Natur aus nicht in der Lage sind, Hintergrundfarben anzuzeigen. Um den gewünschten Effekt zu erzielen, schließen Sie jedes Kontrollkästchen in ein

ein. das die gewünschte Hintergrundfarbe besitzt.

Überarbeitetes CSS-Beispiel:

.listContainer {
  border: 2px solid #CCC;
  width: 340px;
  height: 225px;
  overflow-y: scroll;
  margin-top: 20px;
  padding-left: 10px;
}

.oddRow,
.evenRow {
  margin-top: 5px;
}

.oddRow {
  border: 1px solid #333;
  background-color: #FFFFFF;
}

.evenRow {
  border: 1px solid #333;
  background-color: #9FFF9D;
}

Überarbeitetes HTML-Beispiel:

<div>
<p>Indem Sie jedes Kontrollkästchen in ein </p>
<div> einschließen. Mit der entsprechenden Hintergrundfarbe kann der gewünschte visuelle Effekt erzielt werden, wobei die inhärente Einschränkung von Kontrollkästchen hinsichtlich der Hintergrundfarbe umgangen wird.</div>
</div>

Das obige ist der detaillierte Inhalt vonWarum ändert sich die Hintergrundfarbe meines Kontrollkästchens in einem scrollenden DIV nicht?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!