Optionsfelder und Multiple-Choice-Schaltflächen werden mit Bildern gestaltet

Ich habe schon Leute fragen hören, wie man Optionsfeldern und Multiple-Choice-Schaltflächen Stile hinzufügt und wie man die Schaltflächen größer macht. Lassen Sie mich unten ein Beispiel teilen, das ich gemacht habe.

1. Machen Sie zunächst aus dem Button ein Bild

2.html-Seite

Code kopieren

Der Code lautet wie folgt:

<!DOCTYPE HTML>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<Skripttyp="text/javascript">
$(Funktion(){
$("Eingabe[Typ='Kontrollkästchen']").Klick(Funktion(){
wenn($(this).is(':checked')){
$(this).attr("geprüft","geprüft");
$(this).parent().removeClass("c_off").addClass("c_on");
}anders{
$(this).removeAttr("überprüft");
$(this).parent().removeClass("c_on").addClass(" c_off");
}
});
$("Eingabe[Typ='Radio']").Klick(Funktion(){
$("input[type='radio']").removeAttr("aktiviert");
$(this).attr("geprüft","geprüft");
$(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off");
});
});
</Skript>
</Kopf>
<Stil>
/*Mehrfachauswahl/Einzelauswahl*/
Etikett {
Anzeige: Block;
Cursor: Zeiger;
Zeilenhöhe: 26px;
Rand unten: 20px;
Breite: 26px;
Höhe: 26px;
Zeilenhöhe: 26px;
schweben: links;
Rand oben: 6px;
}
.radios {
Polsterung oben: 18px;
Rahmen oben: 1px durchgezogen #049CDB;
}
.label_check Eingabe, .label_radio Eingabe {
Rand rechts: 5px;
}
.lblby .label_check, .lblby .label_radio {
Rand rechts: 8px;
}
.lblby .label_radio, .lblby .label_check {
Hintergrund: URL (../images/jxc_btn.png) keine Wiederholung;
}
.lblby .label_check {
Hintergrundposition: 0 0px
}
.lblby label.c_on {
Hintergrundposition: 0 -26px;
}
.lblby .label_radio {
Hintergrundposition: 0 -52px;
}
.lblby label.r_on {
Hintergrundposition: 0 -78px;
}
.lblby .label_check Eingabe, .lblby .label_radio Eingabe {
Position: absolut;
links: -9999px;
}
</Stil>
<body Klasse="lblby">
<label für="checkbox-01" class="label_check c_on">
<input type="checkbox" aktiviert="aktiviert" value="1" id="checkbox-01" name="sample-checkbox-01" />
Kontrollkästchen1 </label>
<label für="checkbox-02" class="label_check">
<Eingabetyp="Kontrollkästchen" Wert="1" ID="Kontrollkästchen-02" Name="Beispiel-Kontrollkästchen-02" />
Kontrollkästchen2</label>
<label für="radio-01" class="label_radio r_on">
<input type="radio" value="1" checked="aktiviert" id="radio-01" name="sample-radio" />
Radio1 </label>
<label für="radio-02" class="label_radio r_off">
<Eingabetyp="Radio" Wert="1" ID="Radio-02" Name="Beispielradio" />
Radio2 </label>
<label für="radio-03" class="label_radio r_off">
<Eingabetyp="Radio" Wert="1" ID="Radio-03" Name="Beispielradio" />
Radio3 </label>
</body>
</html>

<<: Zusammenfassung der Ereignisse, die Browser registrieren können

>>: Detaillierte Erläuterung der JavaScript-Programmschleifenstruktur

Vue implementiert einen Einkaufswagen, der die Einkaufsmenge ändern kann

Optionsfelder und Multiple-Choice-Schaltflächen werden mit Bildern gestaltet

Vue implementiert einen Einkaufswagen, der die Einkaufsmenge ändern kann

Implementierungsmethode für die bidirektionale Bindung von Vue-Daten

Beispielcode zur Implementierung der Bereitstellung mehrerer Anwendungen mit Tomcat+Nginx

So stellen Sie mit Navicat eine Remoteverbindung zur Cloud-Server-Datenbank her

Schritte zum Übertragen von Dateien und Ordnern zwischen zwei Linux-Servern

JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs

Vue und React im Detail

Grafisches Tutorial zur Installation und Konfiguration des MySQL Community Server 8.0.16 unter Windows

Zusammenfassung des Prozesses und der häufigsten Probleme beim Verbinden von VS2019 mit einer MySQL-Datenbank

JavaScript imitiert den Jingdong-Lupeneffekt

Artikel empfehlen

10 sehr gute CSS-Fähigkeiten sammeln und teilen

Grafisches Tutorial zur Installation von MySQL 8.0.15 und Datenbankgrundlagen

Lernen Sie 10 Möglichkeiten zum horizontalen und vertikalen Zentrieren in CSS kennen (Zusammenfassung)

Problem mit fehlgeschlagener tzselect-Einstellungszeit in Ubuntu20, Raspberry Pi-Server (empfohlen)

Ein vollständiges Beispiel für die mehrstufige Sprungfunktion (Seiten-Drilldown) von Vue für verwandte Seiten

Zusammenfassung häufiger Probleme mit MySQL-Indizes

Detaillierte Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios

Vor- und Nachteile des Tabellenlayouts und warum es nicht empfohlen wird

Schritte zum Reparieren einer Beschädigung der Datei grub.cfg im Linux-System

Detaillierte Erklärung von BOM und DOM in JavaScript

Reines CSS3 zum Erstellen eines Beispielcodes für Haushühner

Mysql5.7.14 Linux-Version Passwort vergessen perfekte Lösung

Zabbix-Überwachungslösung – die neueste offizielle Version 4.4 [empfohlen]

Was ist em? Einführung und Konvertierungsmethode von em und px

Tipps zur Verwendung von Bildlaufleisten in HTML