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
Tutorial zum Konfigurieren und Verwenden des i3-Fenstermanagers unter Linux
In diesem Artikel zeige ich Ihnen, wie Sie i3 auf...
Methode und Einführung der Tabellenindexdefinition in MySQL
Überblick Ein Index ist eine vom DBMS basierend a...
Detaillierte Schritte zur Installation von Nginx auf dem Apple M1-Chip und zum Bereitstellen eines Vue-Projekts
brew install nginx Apple Mac verwendet zur Instal...
TypeScript-Problem beim Iterieren über Objekteigenschaften
Inhaltsverzeichnis 1. Problem 2. Lösung 1. Deklar...
Ein Beispiel für die Implementierung eines adaptiven Quadrats mit CSS
Die traditionelle Methode besteht darin, ein Quad...
Detaillierte Erklärung von Group By und Having in MySQL
Mit der GROUP BY-Syntax können die Abfrageergebni...
Einführung in HTML DOM_PowerNode Java Academy
Was ist DOM? Mit JavaScript können Sie das gesamt...
Der Nationalfeiertag steht vor der Tür. Verwenden Sie JS, um ein kleines Tool zum Generieren eines Avatars im Stil des Nationalfeiertags zu implementieren. Detaillierte Erläuterung des Implementierungsprozesses
Inhaltsverzeichnis 1. Seitenlayout 2. Bild-Upload...
Webdesigner sollten Webseiten unter drei Aspekten optimieren
<br />Mit der zunehmenden Bandbreite werden ...
Detailliertes Tutorial zum Abrufen der Oracle 11g-Imagekonfiguration über Docker
Ohne weitere Umschweife Beginnen Sie mit der Aufz...
Das verteilte Überwachungssystem Zabbix verwendet SNMP- und JMX-Kanäle zum Sammeln von Daten
Im vorherigen Artikel haben wir etwas über die pa...
So lösen Sie das Problem, dass sich Ubuntu 18.04 wiederholt anmeldet/auf der Boot-Oberfläche hängen bleibt/die grafische Oberfläche nicht aufrufen kann
Ursache: Der NVIDIA-Grafikkartentreiber ist besch...
Beheben Sie das Problem, dass nach der Installation von Centos7 in VMware kein Ping an das externe Netzwerk möglich ist
Beim Konfigurieren eines Clusters ist ein Problem...
Zusammenfassung der Wissenspunkte zum Selbststudium der integrierten MySql-Funktionen
Zeichenfolgenfunktionen Überprüfen Sie den ASCII-...
Detaillierte Beschreibung von nginx von der Kompilierung und Installation bis zur Beschreibung der Konfigurationsdatei auf Chinesisch
Dieser Artikel stellt Nginx ausführlich vor, von ...