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
Teilen Sie 8 sehr nützliche CSS-Entwicklungstools
CSS3-Mustergalerie Diese CSS3-Musterbibliothek ze...
Eine kurze Diskussion über die spezifische Verwendung von Ansichtsfenstern in mobilen Endgeräten
Inhaltsverzeichnis 1. Grundlegende Konzepte 1.1 Z...
Lösen Sie das Problem, dass auf VMware15 Centos7 Bridge-Modus SSH plötzlich nicht mehr zugegriffen werden kann
Da ich möchte, dass die virtuelle Maschine eine e...
Tutorial zur Installation und Konfiguration von MySQL 8.0.12 unter Win10
Installation, Konfiguration, Start, Anmeldung und...
Tutorial zur Installation von Ceph Distributed Storage mit Yum unter Centos7
Inhaltsverzeichnis Vorwort Konfigurieren Sie die ...
Probleme bei der Installation von Python3 und Pip in Ubuntu in Docker
Text 1) Laden Sie das Ubuntu-Image herunter Docke...
Einführung in den strikten Modus von JavaScript verwenden Sie strikt
Inhaltsverzeichnis 1. Übersicht 1.1 Was ist der s...
So bereinigen Sie Ihre Docker-Daten vollständig
Inhaltsverzeichnis Regelmäßig beschneiden Spiegel...
ElementUI implementiert Beispielcode für Dropdown-Optionen und Mehrfachauswahlfelder
Inhaltsverzeichnis Dropdown-Feld zur Mehrfachausw...
Methoden zur Optimierung von Oracle-Datenbanken mit großen Speicherseiten unter Linux
Vorwort PC Server hat sich bis heute weiterentwic...
So gehen Sie mit vergessenen Passwörtern in Windows Server 2008 R2 um
Was tun, wenn Sie Windows Server 2008R2 vergessen...
Erfahren Sie, wie Sie Nginx schnell in CentOS7 installieren
Inhaltsverzeichnis 1. Übersicht 2. Laden Sie das ...
In IIS 7.5 unterstützt HTML die Include-Funktion wie SHTML (Modulzuordnung hinzufügen).
Als ich das erste Mal anfing, fand ich viele Fehl...
Zusammenfassung der Verwendung von Linux-SFTP-Befehlen
sftp ist die Abkürzung für Secure File Transfer P...
Ändern Sie die maximale Anzahl von MySQL-Verbindungen und Konfigurationsdateien in Docker
1. Suchen Sie das MySQL-Image Docker PS 2. Geben ...