Benutzerdefinierte Checkbox

8

Hallo, ich versuche, ein benutzerdefiniertes Kontrollkästchen für meine Website zu erstellen, wie den bereitgestellten Bildlink. Was wäre der beste Weg, dies zu tun? Vielen Dank.

    
HAWKES08 27.06.2011, 11:12
quelle

2 Antworten

11

Es gibt einen CSS-Trick, der tatsächlich funktioniert, indem das Kontrollkästchen (oder Radio) ausgeblendet wird, indem ein Label definiert wird (das in allen relevanten Browsern das Kontrollkästchen aktiviert / deaktiviert), das die visuelle Darstellung ist, und das :checked verwendet. und + selectors.

Dies ist nur ein einfaches Beispiel:

HTML

%Vor%

CSS

%Vor%

jsFiddle Demo

Nachteile: Der :checked Selektor funktioniert leider nicht auf IE >, nur von IE9. Sie können jedoch ein Javascript-Fallback nur für IE durch bedingte Kommentare anwenden.

Hinweis: Für die Barrierefreiheit sollten Sie Text haben, der das Kontrollkästchen in label beschreibt, ich wollte nur den Effekt veranschaulichen.

    
kapa 27.06.2011, 11:34
quelle
2

jQuery ist Ihre beste Wette, das ist ein Checkbox-Plugin zum Beispiel , aber es gibt Hunderte von ihnen, so etwas anderes kann Passe dich besser an. Rufen Sie einfach das jquery benutzerdefinierte Kontrollkästchen auf.

    
Jordan Wallwork 27.06.2011 11:16
quelle

Tags und Links