Warum kann ich die Hintergrundfarbe meines Kontrollkästchens in Firefox 29 nicht ändern?

Fehlerbehebung bei der Farbänderung von Kontrollkästchen

Sie sind auf Schwierigkeiten beim Ändern der Hintergrundfarbe eines Kontrollkästchens gestoßen, obwohl Sie verschiedene CSS-Stile ausprobiert haben. Dieses Verhalten ist besonders rätselhaft, da Sie Firefox 29 verwenden, der auf dem neuesten Stand ist. Um dieses Problem zu beheben, untersuchen wir das zugrunde liegende CSS- und Browserverhalten.

CSS-Stylesheet

Das von Ihnen bereitgestellte CSS enthält zwei Regeln, die versuchen, das Kontrollkästchen zu formatieren:

<code class="css">input[type="checkbox"] {
    background: #990000;
}

.chk {
   background-color: #990000;
}</code>

Die erste Regel zielt auf alle Kontrollkästchen ab, die den Attributselektor verwenden, während die zweite Regel auf Elemente mit der Klasse „chk“ abzielt. In beiden Fällen ist die Hintergrundfarbe auf #990000 eingestellt.

Browserverhalten

Firefox hat zusammen mit anderen Browsern bestimmte Standardstile für Formularelemente wie Kontrollkästchen implementiert . Diese Standardstile können Ihre CSS-Regeln außer Kraft setzen, was es schwierig macht, das Erscheinungsbild des Kontrollkästchens zu ändern.

Lösung

Um dieses Problem zu beheben, können Sie den Akzent verwenden. color-Eigenschaft, mit der Sie eine Farbe für verschiedene Formularelemente, einschließlich Kontrollkästchen, angeben können. Hier ist ein aktualisiertes CSS-Beispiel:

<code class="css">#cb1 {
  accent-color: #9b59b6;
}

#cb2 {
  accent-color: #34495e;
}

#cb3 {
  accent-color: #e74c3c;
}</code>

In diesem Beispiel werden den Kontrollkästchenelementen mithilfe des #cb-ID-Attributs unterschiedliche Akzentfarben zugewiesen. Dies sollte die Standardbrowser-Stile überschreiben und es Ihnen ermöglichen, die Farbe des Kontrollkästchens nach Wunsch zu ändern.

Das obige ist der detaillierte Inhalt vonWarum kann ich die Hintergrundfarbe meines Kontrollkästchens in Firefox 29 nicht ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!