Wie ändert man den Stil der Radio- und Checkbox-Eingabe
Ich habe eine Website, auf der ich versuche, die Hintergrundfarbe des Punktes eines Optionsfelds zu ändern. Im Moment scheint es transparent zu sein, so dass es die Farbe des Hintergrunds bekommt. Ich habe versucht, CSS zu verwenden und "background: white;" zum Beispiel zu setzen, dies hat jedoch keinen Effekt im Browser. Irgendwelche Ideen von coolen Tricks, um das zu erreichen?
Gleiche Frage steht auch für Checkbox.
6 Antworten
Diese Technik verwendet das label -Element, das an versteckte input -Elemente gebunden ist. Das Empfangen eines :checked -Zustands ändert das Aussehen des :before -Pseudo-Elements:
Es ist gut bekannt, dass Sie nicht jedes Detail von browsergenerierten Steuerelementen ändern können. Zum Beispiel die Farbe des Pfeils in einem Dropdown-Menü oder der Punkt eines Radios usw. ...
Sie können Ihre eigenen Steuerelemente erstellen, eine Bibliothek wie JQuery UI verwenden oder .... vielleicht ein wenig mit CSS herumspielen.
Hier ist ein Experiment, um einen farbigen Punkt auf einem Radio mit :before pseudo-Element vorzutäuschen:
Ergebnis:
Die bevorzugte Methode zum Formatieren der Nicht-Label-Elemente von Kontrollkästchen und Optionsfeldern mit CSS besteht darin, sie im Wesentlichen durch Bilder zu ersetzen, die ihren aktuellen Status darstellen (nicht markiert, markiert usw.).
Siehe diesen Artikel von Ryan Seddon: Ссылка
Es gibt viele Möglichkeiten, dies zu tun, alle involvieren, um die DOM-Stile loszuwerden, da es unmöglich ist, dies ohne diese "Tricks" zu tun. Hier ist ein Beispiel von Chris Coyier (lies einfach die Seite, überspringe Schritt 1 und einfach die Bilder und CSS vorbereiten)
%Vor%Der Browser selbst behandelt das Aussehen von Optionsfeldern und Kontrollkästchen sowie das Dropdown / Auswahlmenü. Sie können jedoch die Optionsfelder ausblenden, sie durch Bilder ersetzen und dann Ihren Funk- / Prüfwert mithilfe von jQuery ändern. Font Awesome ( Ссылка ) hat einige coole Icons, die du dafür verwenden kannst.
%Vor%Sie können ionische Radio-Buttons mit css allein gestalten. Prüfe die Geige:
%Vor%