Radio buttons and multiple-choice buttons are styled using images

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

Recommend

Detailed explanation of MySQL stored procedures, cursors, and transaction examples

Detailed explanation of MySQL stored procedures, ...

How to specify parameter variables externally in docker

This article mainly introduces how to specify par...

Angular performance optimization: third-party components and lazy loading technology

Table of contents Overview Environment Preparatio...

Detailed explanation of Nginx process management and reloading principles

Process structure diagram Nginx is a multi-proces...

Linux command line quick tips: How to locate a file

We all have files stored on our computers -- dire...

Detailed process of Vue front-end packaging

Table of contents 1. Add packaging command 2. Run...

Example code for implementing timeline and animation effects using JavaScript (front-end componentization)

Table of contents Code cleaning "Frames"...

CentOS system rpm installation and configuration of Nginx

Table of contents CentOS rpm installation and con...

Solve the problem that the default value of CSS3 transition-delay attribute is 0 without unit and it is invalid

Today I would like to share with you the CSS3 tra...

A brief analysis of different ways to configure static IP addresses in RHEL8

While working on a Linux server, assigning static...

Three common methods for HTML pages to automatically jump after 3 seconds

In practice, we often encounter a problem: how to...

How to install tomcat8 in docker

1. Install tomcat8 with docker 1. Find the tomcat...

Bootstrap 3.0 study notes buttons and drop-down menus

The previous article was a simple review of the B...

MySQL 5.7.20\5.7.21 free installation version installation and configuration tutorial

mysql download, install and configure 5.7.20 / 5....

Solution to the problem that docker logs cannot be retrieved

When checking the service daily, when I went to l...