CSS "background-color" - Attribut funktioniert nicht auf checkbox innerhalb <div>

Die überschrift ziemlich genau erklärt. Ich habe ein paar Checkboxen innerhalb eines scrollbaren div. Aber für einige Gründe, die 'hintergrund-Farbe' - Attribut nicht funktioniert. Obwohl die 'margin-top' scheint zu funktionieren...

Nur mir rätselhaft, wie ein Attribut arbeiten kann und ein anderer nicht. Es ist auch nicht, wie das div hat seinen eigenen background-color-Attribute, die potenziell die Fahrt über die Kontrollkästchen Attribute.

Anyways, unten ist mein HTML-Code (die erzeugt wird durch JSP):

<div class="listContainer">
    <input type="checkbox" class="oddRow">item1<br/>
    <input type="checkbox" class="evenRow">item2<br/>
    <input type="checkbox" class="oddRow">item3<br/>
    <input type="checkbox" class="evenRow">item4<br/>
    ...
</div>

Und hier ist mein 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;
        }

Vielen Dank im Voraus für jeden, der kann mir in die richtige Richtung!

InformationsquelleAutor Tiwaz89 | 2011-09-13

57

Einer checkbox nicht über die Farbe für den hintergrund
was möchten Sie vielleicht zu tun ist, wickeln Sie alle Kontrollkästchen mit einem div, die Farbe hat.
die Ausgabe sollte so etwas wie dieses:
```
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
<div class="evenRow">
    <input type="checkbox" />
</div>
<div class="oddRow">
    <input type="checkbox" />
</div>
```
Ich brauche 15rep, bevor ich Sie geben kann ein upvote, aber danke! Tat was Sie vorgeschlagen, und es funktionierte perfekt...
Jetzt haben Sie 6,427 rep. ^ 😉
Bei mir die checkbox-bg ist immer noch Grau, nur die Gegend um das Kontrollkästchen ändern der hintergrund vom div... <div style="background-color: #ffffff;"><input type="checkbox" ng-model="vm.toTenant" style="width:25px; height:25px; margin-top:8px; background-color:#FFFFFF" value=""></div>
jetzt ist 8k+ 😀
dauerte 7 Jahre, um 15 upvotes, dass zählt als 15 rep rechts?

InformationsquelleAutor dov.amir
18

Zusätzlich zu den momentan akzeptierte Antwort: Sie können Rahmen und den hintergrund der checkbox/radiobutton, aber wie es gemacht wird am Ende richtet sich nach dem browser. Zum Beispiel, wenn Sie einen roten hintergrund auf eine checkbox
- IE zeigt einen roten statt
- Opera zeigen roten hintergrund wie vorgesehen
- Firefox, Safari und Chrome nichts zu tun
Dieser Artikel vergleicht ein paar Browsern und erklärt zumindest das IE-Verhalten. Es ist vielleicht etwas älter (noch einschließlich Netscape), aber wenn Sie testen, um Sie herum werden bemerken, dass sich nicht viel geändert hat. Einen weiteren Vergleich gefunden werden kann hier.

InformationsquelleAutor Louise

Nach so viel Mühe habe ich es.

.purple_checkbox:after {
  content: " ";
  background-color: #5C2799;
  display: inline-block;
  visibility: visible;
}

.purple_checkbox:checked:after {
  content: "\2714";
  box-shadow: 0px 2px 4px rgba(155, 155, 155, 0.15);
  border-radius: 3px;
  height: 12px;
  display: block;
  width: 12px;
  text-align: center;
  font-size: 9px;
  color: white;
}

Wird es so sein, wenn überprüft mit diesem code.
CSS

InformationsquelleAutor lilhamad

-3

Bei der Eingabe des body-Tags, drücken Sie Raum, nur eine Zeit ohne schließen des Tags und input -bgcolor="red", nur zum Beispiel. Dann wählen Sie eine diff-Farbe für Ihre Schrift.

Tun Sie das nicht. Neben diesen arbeiten nicht für <input type="checkbox"> in allen Browsern, es gibt ein größeres Problem: es ist wichtig halten Sie Ihre styling-getrennt von Ihrem markup.

InformationsquelleAutor Friendly Banana

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.