Warum ändert sich die Hintergrundfarbe meines Kontrollkästchens in einem scrollenden DIV nicht?-CSS-Tutorial-php.cn

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

Nach dem Login kopieren

Überarbeitetes HTML-Beispiel:

<div>

Nach dem Login kopieren

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!

Vorheriger Artikel：Wie ermöglicht das \'i\'-Flag den Attributabgleich ohne Berücksichtigung der Groß-/Kleinschreibung in CSS? Nächster Artikel：Warum funktioniert mein CSS-Rasterlayout nicht mehr?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2814

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2939

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

2457

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...