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

Natives JS zur Implementierung der Paging-Klicksteuerung

Schöner Kontrollkästchenstil (Feld für Mehrfachauswahl), perfekt kompatibel mit IE8/9/10, FF usw.

Natives JS zur Implementierung der Paging-Klicksteuerung

Häufige JavaScript-Speicherfehler und Lösungen

Der Interviewer fragte, wie man in CSS ein festes Seitenverhältnis erreicht

So installieren Sie den Elasticsearch7.6-Cluster im Docker und legen ein Kennwort fest

Analysieren des MySQL-Binärprotokolls

Detaillierte Erläuterung der Konfiguration der Yum-Quelle von Docker und deren Installation in CentOS7

MySql-Import - CSV-Datei oder tabulatorgetrennte Datei

Beispiele für Vorschaufunktionen für verschiedene Dateitypen in vue3

Vue-Anpassungsmethode für Großbildschirme

Docker-Bereitstellung von Kafka und Spring Kafka-Implementierung

Artikel empfehlen

So verwenden Sie CSS-Overflow: Hidden (Überlauf ausblenden und Floats löschen)

So erhalten Sie Datums-/Uhrzeitdaten in MySQL, gefolgt von .0

Axios storniert wiederholte Anfragen

Tutorial zur Konfiguration von SSH und Xshell für die Verbindung zum Server unter Linux (mit Bildern)

CSS zum Erzielen von leuchtendem Text und ein paar JS-Spezialeffekten

Lösungen für Unterschiede in der Browserinterpretation hinsichtlich Größe, Breite und Höhe in CSS

Detaillierte Erklärung zum Anzeigen der MySQL-Speichernutzung

Empfohlene 20 besten kostenlosen englischen Handschrift-Schriftarten

JavaScript-Grundlagenobjekte

So implementieren Sie einen reibungslosen Neustart von Nginx

VUE implementiert Token-Anmeldeüberprüfung

Details zum Überschreiben von Prototypmethoden in JavaScript-Instanzobjekten

Neue Verwendung von watch und watchEffect in Vue 3

Eine kurze Erläuterung der Unterschiede zwischen den verschiedenen Möglichkeiten zum Ausführen von .sh-Dateien in Ubuntu

So verwenden Sie das Docker-Plugin, um Projekte remote auf Cloud-Servern in IDEA bereitzustellen