suchen

Heim >Web-Frontend >CSS-Tutorial >Warum ändert sich die Hintergrundfarbe meines Kontrollkästchens in einem scrollenden DIV nicht?

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

Barbara Streisand
Barbara StreisandOriginal
2024-11-29 17:22:11267Durchsuche

Why Isn't My Checkbox Background Color Changing Inside a Scrolling DIV?

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>

Indem Sie jedes Kontrollkästchen in ein

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.

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!

css html checkbox Attribute function this display margin background issue Other
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie ermöglicht das \'i\'-Flag den Attributabgleich ohne Berücksichtigung der Groß-/Kleinschreibung in CSS?Nächster Artikel：Wie ermöglicht das \'i\'-Flag den Attributabgleich ohne Berücksichtigung der Groß-/Kleinschreibung in CSS?

In Verbindung stehende Artikel

Mehr sehen