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

So verwenden Sie benutzerdefinierte CSS-Variablen in Vue

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

So verwenden Sie benutzerdefinierte CSS-Variablen in Vue

So schreiben Sie mit nodejs ein Tool zur Generierung von Entitätsklassen für Datentabellen für C#

Implementierung des MySQL Shell import_table-Datenimports

Detaillierte Erläuterung mehrerer Lösungen für JavaScript-Unterbrechungsanforderungen

Zusammenfassung der Grundlagen der Vue-Komponenten

Eine kurze Diskussion über einen effizienten Algorithmus zum Erstellen von Baumstrukturen in JavaScript

MySQL-Konfiguration SSL-Master-Slave-Replikation

Automatische Zeilenumbrüche in HTML-Pre-Tags

Zusammenfassung der Ausführungsprobleme zwischen MySQL Max und Where

Vue-Anfängerhandbuch: Erstellen des ersten Vue-cli-Scaffolding-Programms

Artikel empfehlen

So vergleichen Sie zwei Datenbanktabellenstrukturen in MySQL

Definieren Sie Ihre eigene Ajax-Funktion mit JavaScript

Einfache Anwendungsbeispiele für benutzerdefinierte MySQL-Funktionen

Webdesign-Dimensionen und Regeln für die Werbegestaltung auf Webseiten

Lösungen für Probleme bei der Verwendung von addRoutes in Vue-Projekten

CSS3 realisiert Partikelanimationseffekte beim Matching von Königen

Windows kann den MySQL-Dienst nicht starten und meldet Fehler 1067 – Lösung

Interpretation des Moduls zum Lastenausgleich mit nginx

Bringen Sie Ihnen bei, wie Sie die Zeigerposition in Javascript erhalten

CSS zum Erzielen des Like-Card-Effekts in der unteren rechten Ecke der Webseite (Beispielcode)

html ein Link-Tag Titel Attribut Zeilenumbruch Mouseover Prompt Inhalt Zeilenumbruch Effekt

Tipps zum reflektierenden Lernen von JavaScript

Allgemeine Array-Operationen in JavaScript

MySQL-Anmelde- und Beendigungsbefehlsformat

CSS setzt Overflow, um die Bildlaufleiste auszublenden und gleichzeitig das Scrollen zu ermöglichen