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 Erläuterung des Konfigurationsprozesses des Docker-Container-Netzwerkports

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

Detaillierte Erläuterung des Konfigurationsprozesses des Docker-Container-Netzwerkports

So verwenden Sie CSS, um das übergeordnete Container-Div mit img-Bildern zu füllen und die Containergröße anzupassen

So stellen Sie eine Verbindung zu einem Remoteserver her und übertragen Dateien über einen Jump-Server in Linux

MySQL verwendet einen abdeckenden Index, um Tabellenrückgaben zu vermeiden und die Abfrage zu optimieren

Detaillierte Erklärung zum effizienten Importieren mehrerer SQL-Dateien in MySQL

Schritte zum Einrichten des Windows Server 2016 AD-Servers (Bild und Text)

So verwenden Sie einen Gamecontroller in CocosCreator

Vue realisiert Bildwechseleffekt

Klassischer Beispielcode für JavaScript-Funktionsaufrufe

Drei JavaScript-Methoden zur Lösung des Joseph-Ring-Problems

Artikel empfehlen

28 berühmte Beispiele für Blog-Redesigns

Analyse des Konfigurationsprozesses der Nginx-HTTP-Integritätsprüfung

Tatsächlicher Datensatz zur Wiederherstellung der MySQL-Datenbank nach Zeitpunkt

Eine Codezeile löst verschiedene IE-Kompatibilitätsprobleme (IE6-IE10)

Achten Sie bei der Webseitenerstellung auf die Verwendung von HTML-Tags

Natives JS zur Implementierung der Drag-Position-Vorschau

So stellen Sie Tencent Cloud Server von Grund auf bereit

Eine kurze Diskussion über Shallow Copy und Deep Copy in JavaScript

Detaillierte Erläuterung der Parameteroptimierung table_open_cache und sinnvolle Konfiguration unter MySQL 5.6

Grafische Erklärung des Funktionsaufrufs der Protodatei in Vue

Einfaches Beispiel für die Leistungsoptimierung von MySQL-SQL-Anweisungen

So starten/stoppen Sie den Tomcat-Server in Java

Schreibreihenfolge und Namenskonventionen sowie Vorsichtsmaßnahmen im CSS-Stil

JavaScript implementiert Countdown auf Front-End-Webseite

Vue implementiert Beispielcode zur Formulardatenvalidierung