Radio buttons and multiple-choice buttons are styled using images

I've seen people asking before, how to add styles to radio buttons and multiple-choice buttons, and how to make the buttons bigger? Let me share an example I made below.

1. First, make the button into a picture

2.html page

Copy code

The code is as follows:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("input[type='checkbox']").click(function(){
if($(this).is(':checked')){
$(this).attr("checked","checked");
$(this).parent().removeClass("c_off").addClass("c_on");
}else{
$(this).removeAttr("checked");
$(this).parent().removeClass("c_on").addClass(" c_off");
}
});
$("input[type='radio']").click(function(){
$("input[type='radio']").removeAttr("checked");
$(this).attr("checked","checked");
$(this).parent().removeClass("r_off").addClass("r_on").siblings().removeClass("r_on").addClass("r_off");
});
});
</script>
</head>
<style>
/*Multiple choice/single choice*/
label {
display: block;
cursor: pointer;
line-height: 26px;
margin-bottom: 20px;
width: 26px;
height: 26px;
line-height: 26px;
float: left;
margin-top: 6px;
}
.radios {
padding-top: 18px;
border-top: 1px solid #049CDB;
}
.label_check input, .label_radio input {
margin-right: 5px;
}
.lblby .label_check, .lblby .label_radio {
margin-right: 8px;
}
.lblby .label_radio, .lblby .label_check {
background: url(../images/jxc_btn.png) no-repeat;
}
.lblby .label_check {
background-position: 0 0px
}
.lblby label.c_on {
background-position: 0 -26px;
}
.lblby .label_radio {
background-position: 0 -52px;
}
.lblby label.r_on {
background-position: 0 -78px;
}
.lblby .label_check input, .lblby .label_radio input {
position: absolute;
left: -9999px;
}
</style>
<body class="lblby">
<label for="checkbox-01" class="label_check c_on">
<input type="checkbox" checked="checked" value="1" id="checkbox-01" name="sample-checkbox-01" />
Checkbox1 </label>
<label for="checkbox-02" class="label_check">
<input type="checkbox" value="1" id="checkbox-02" name="sample-checkbox-02" />
Checkbox2</label>
<label for="radio-01" class="label_radio r_on">
<input type="radio" value="1" checked="checked" id="radio-01" name="sample-radio" />
Radio1 </label>
<label for="radio-02" class="label_radio r_off">
<input type="radio" value="1" id="radio-02" name="sample-radio" />
Radio2 </label>
<label for="radio-03" class="label_radio r_off">
<input type="radio" value="1" id="radio-03" name="sample-radio" />
Radio3 </label>
</body>
</html>

<<: Summary of events that browsers can register

>>: Detailed explanation of JavaScript program loop structure

Summary of HTML horizontal and vertical centering issues

Radio buttons and multiple-choice buttons are styled using images

Summary of HTML horizontal and vertical centering issues

Install and configure MySQL 5.7 under CentOS 7

Introduction to 10 online development tools for web design

A brief analysis of HTML space code

Autotrash tool for Linux to automatically delete old junk files at a scheduled time

Analyzing the practical record of using docker to build microservices with SpringBoot

Tutorial on processing static resources in Tomcat

View the dependent libraries of so or executable programs under linux

Summary of some of my frequently used Linux commands

MySQL slow query operation example analysis [enable, test, confirm, etc.]

Recommend

Reasons and solutions for MySQL selecting the wrong index

JavaScript prototype and prototype chain details

Implementation of MySQL's MVCC multi-version concurrency control

Example code for inputting the license plate number and province abbreviation in html

The role and opening of MySQL slow query log

How to add Nginx to system services in CentOS7

Teach you 10 ways to center horizontally and vertically in CSS (summary)

Sqoop export map100% reduce0% stuck in various reasons and solutions

JavaScript jigsaw puzzle game

Solution to click event failure when using better-scroll on vue mobile development

WeChat Mini Programs are shared globally via uni-app

js to realize the rotation of web page pictures

How to write asynchronous tasks in modern JavaScript

Nginx access log and error log parameter description

CSS3 achieves infinite scrolling/carousel effect of list