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

Detailed tutorial for installing MySQL 8.0.11 compressed version under win10

Radio buttons and multiple-choice buttons are styled using images

Detailed tutorial for installing MySQL 8.0.11 compressed version under win10

After idea publishes web project, Tomcat server cannot find the project and its solution

Linux (center OS7) installs JDK, tomcat, mysql to build a java web project running environment

Detailed analysis of compiling and installing vsFTP 3.0.3

Detailed explanation of the solution to the nginx panic problem

Detailed tutorial on installing Prometheus with Docker

CSS container background 10 color gradient Demo (linear-gradient())

JavaScript to implement limited time flash sale function

MySQL 8.0.12 decompression version installation tutorial

How to install babel using npm in vscode

Recommend

Detailed explanation of the method of comparing dates in MySQL

Monitor changes in MySQL table content and enable MySQL binlog

Solution to inserting a form with a blank line above and below

Vue implements the requirement of dragging and dropping dynamically generated components

Summarize several common ranking problems in MySQL

Example code for implementing image adaptive container with CSS

A brief discussion on the maximum number of open files for MySQL system users

Solve the problem of no my.cnf file in /etc when installing mysql on Linux

Detailed explanation of the use of umask under Linux

Incomplete solution for using input type=text value=str

React implements infinite loop scrolling information

Mysql master-slave synchronization Last_IO_Errno:1236 error solution

An audio-visual Linux distribution that appeals to audiophiles

Detailed tutorial on how to log in to the system using the root user in the new version of Ubuntu 20.04

Three ways to implement text color gradient in CSS