CSS - Wie style ein ausgewähltes Radio Buttons Label?
Möchte ich hinzufügen, dass Sie einen Stil auf einen radio-button ausgewählt label:
HTML:
<div class="radio-toolbar">
<label><input type="radio" value="all" checked>All</label>
<label><input type="radio" value="false">Open</label>
<label><input type="radio" value="true">Archived</label>
</div>
CSS
.radio-toolbar input[type="radio"] {display:none;}
.radio-toolbar label {
background:Red;
border:1px solid green;
padding:2px 10px;
}
.radio-toolbar label + input[type="radio"]:checked {
background:pink !important;
}
Irgendwelche Ideen was ich falsch mache?
InformationsquelleAutor der Frage AnApprentice | 2011-01-09
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wenn Sie wirklich wollen, setzen Sie die Checkboxen innerhalb der label, die versuchen, ein zusätzliches span-tag, zB.
HTML
CSS
Setzen wird, die Hintergründe für alle Geschwister des ausgewählten radio-button.
InformationsquelleAutor der Antwort iainbeeston
Sind Sie mit einem benachbarten Geschwister-Selektor (
+
), wenn die Elemente sind nicht Geschwister. Das label ist die Eltern der Eingang, nicht der Geschwister.CSS keine Möglichkeit hat, zu wählen Sie ein element anhand seiner Nachkommen (noch etwas, das ihm folgt).
Sie suchen müssen, um JavaScript, um dieses Problem zu lösen.
Alternativ, ordnen Sie den markup:
InformationsquelleAutor der Antwort Quentin
Können Sie einen span auf Ihrem html und css .
Hier ist ein Beispiel aus meinem code ...
HTML ( JSX ):
CSS zu machen, die standard-radio-button verschwinden auf dem Bildschirm und legen Sie die benutzerdefinierte Schaltfläche Bild:
InformationsquelleAutor der Antwort Praveena Janakiraman