Schöner Kontrollkästchenstil (Feld für Mehrfachauswahl), perfekt kompatibel mit IE8/9/10, FF usw.
|
Es ist peinlich zu sagen, dass ich lange bei Baidu suchen musste, um den Stil eines so häufig verwendeten Kontrollkästchens zu ändern. Noch ärgerlicher ist, dass Baidu lange Zeit keine praktikable Lösung finden konnte. Später habe ich auf csscheckbox.com jede Menge Stile gefunden, aber als ich sie auf Kompatibilität getestet habe, funktionierten sie nicht mit dem Internet Explorer. Dies hat viel Zeit in Anspruch genommen. Nachdem ich viele Tastenkombinationen ohne Erfolg ausprobiert hatte, kehrte ich zu JQuery UI zurück. Natürlich ist die Kompatibilität sehr gut und ich kann den Stil nach Belieben zeichnen. Hier ist eine Aufzeichnung eines Kontrollkästchenstils für Ihre Bequemlichkeit und meine zukünftige Verwendung.  Es gibt drei Zustände: Standard, Hover und Aktiv. Es wurde getestet und ist perfekt kompatibel mit IE8/9/10, FF usw. Code kopieren Der Code lautet wie folgt:<!doctype html> <html lang="de"> <Kopf> <meta charset="utf-8" /> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <Skript> $(Funktion() { $("#prüfen").button(); $("#format").buttonset(); }); </Skript> <Stil> .ui-button-text-only .ui-button-text { Polsterung: 8px; } .ui-state-default, .ui-widget-Inhalt .ui-Status-Standard, .ui-widget-header .ui-state-default { Hintergrund: URL (Bilder/Safari-Checkbox.png) 0 0 keine Wiederholung; Rahmen: keine; } .ui-Zustand-hover, .ui-Widget-Inhalt .ui-Status-Hover, .ui-widget-header .ui-status-hover, .ui-Zustand-Fokus, .ui-widget-Inhalt .ui-Status-Fokus, .ui-widget-header .ui-state-fokus { Hintergrund: URL (Bilder/Safari-Checkbox.png) – 16px 0, keine Wiederholung; Rahmen: keine; } .ui-Zustand-aktiv, .ui-widget-Inhalt .ui-Status-aktiv, .ui-widget-header .ui-status-aktiv { Hintergrund: URL (Bilder/Safari-Checkbox.png) 0 –16 px, keine Wiederholung; Rahmen: keine; } </Stil> </Kopf> <Text> <Eingabetyp="Checkbox" ID="Check" /><Label für="Check"></Label> </body> </html> |
<<: Dreißig HTML-Codierungsrichtlinien für Anfänger
>>: Der Interviewer fragte, wie man in CSS ein festes Seitenverhältnis erreicht
Artikel empfehlen
Lösen Sie das Problem der blockierenden Positionierungs-DDL in MySQL 5.7
Im vorherigen Artikel „Änderungen der MySQL-Tabel...
Div überschreitet den versteckten Text und versteckt den CSS-Code jenseits des Div-Teils
Vor dem Verstecken: Nach dem Verstecken: CSS: Code...
js zur Implementierung einer Interferenz mit Verifizierungscodes (statisch)
In diesem Artikel wird der spezifische Code von j...
Detaillierte Erläuterung des MySQL-Redo-Logs (Redo-Log) und des Rollback-Logs (Undo-Log)
Vorwort: Im vorherigen Artikel wurden mehrere all...
So fügen Sie dem Tomcat-Dienst einen Java-Startbefehl hinzu
Mein erstes Serverprogramm Ich lerne gerade, Onli...
Beispielcode von layim zum Integrieren des Rechtsklickmenüs in JavaScript
Inhaltsverzeichnis 1. Wirkungsdemonstration 2. Im...
Eine kurze Analyse der grundlegenden Implementierung von Vue-Erkennungsdatenänderungen
Inhaltsverzeichnis 1. Objektänderungserkennung 2....
Centos8.3, Docker-Bereitstellung, Springboot-Projekt, tatsächliche Fallanalyse
Einführung Derzeit ist k8s sehr beliebt und ich h...
Verwenden einer MySQL-Datenbank mit Python 3.4 unter Windows 7
Der detaillierte Prozess der Verwendung der MySQL...
Tiefgreifendes Verständnis des relativen Pfads (Relative Path) und des absoluten Pfads (Absolute Path) in HTML
Ich beschäftige mich seit über einem Jahr mit Java...
Konkretes Beispiel einer MySQL-Mehrtabellenabfrage
1. Verwenden Sie die SELECT-Klausel, um mehrere T...
Detaillierte Erklärung der Anzeigeeigenschaft im CSS-Beschriftungsmodus
Der Code sieht folgendermaßen aus: <!DOCTYPE h...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.13 unter Windows 64 Bit
In diesem Artikel finden Sie das Installations- u...
Der vollständige Code der im Uniapp-Applet enthaltenen Radardiagrammkomponente
Effektbild: Der Implementierungscode lautet wie f...
3D-Tunneleffekt implementiert durch CSS3
Der erzielte EffektImplementierungscode html <...