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

Detaillierte Erklärung der Routenkonfiguration von Vue-Router

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

Detaillierte Erklärung der Routenkonfiguration von Vue-Router

Detaillierte Erklärung, wie MySQL Phantom-Lesevorgänge löst

Der gesamte Prozessbericht zur Einführung des Vant-Frameworks in das WeChat-Applet

So implementieren Sie die Navigationsfunktion im WeChat Mini-Programm

So verteilen Sie mit CSS zwei Schaltflächen auf der linken und rechten Seite desselben übergeordneten Tags

So implementieren Sie eine Multi-Terminal-Bridging-Plattform basierend auf WebSocket in JS

Verwendung des Linux-Befehls ipcs

Einführung in 10 Online-Entwicklungstools für Webdesign

MySQL-Methode zum Anzeigen der aktuell verwendeten Konfigurationsdatei my.cnf (empfohlen)

61 Dinge, die jeder Webentwickler wissen sollte

Artikel empfehlen

Die neueste Sammlung von 18 Webdesign-Arbeiten im grünen Stil

Detaillierte Erläuterung des Funktionsprinzips und der Verwendung des Docker-Image-Submission-Befehls Commit

Lösung für das Problem, dass bei der Installation von Centos7 mit VmWare kein Zugriff auf das Internet möglich ist

Beispielcode zur Implementierung eines bildadaptiven Containers mit CSS

Zwei Möglichkeiten zum Implementieren einer HTML-Seite: Klicken Sie auf „Datei herunterladen“

So verwenden Sie das Marquee-Tag im XHTML-Code

Grundsätze zur Auswahl von MySQL-Datentypen

Detaillierte Beispiele zur Konvertierung von Zeilen in Spalten und Spalten in Zeilen in MySQL

Detaillierte Anwendungsfälle von MySql Escape

Detaillierte Erklärung der Hook-Funktion und -Nutzung im Lebenszyklus der neuen Version von React

Vue implementiert Modal-Komponente basierend auf Teleport

Beispielcode zum Partitionieren und Formatieren einer Festplatte größer als 20 TB auf CentOS6

Installieren Sie Memcached und die PHP Memcached-Erweiterung unter CentOS

Optimierte Implementierung von count() für große MySQL-Tabellen

Das Problem „mmx64.efi nicht gefunden“ tritt bei der Installation des Ubuntu18-Dualsystems auf Win10 auf