使⽤css修改input框中checkbox的样式
概述
在页⾯设计时，我们经常使⽤input复选框。由于界⾯设计的需要，我们需要修改复选框的样式，使得界⾯更美观或者适应新的需求。由于CheckBox伪类修改⽐较复杂，通常修改的⽅式有两种，⼀个是链⼊图⽚，另⼀个是使⽤纯css的⽅法进⾏修改。链⼊图⽚的设计⽅式⽐较简单，但是需要预先设计或者下载图⽚，⽐较⿇烦。纯css的⽅法，只需要在css⽂件中编写代码，个⼈觉得⽐较⽅便，因此，本⽂使⽤该⽅式对input中的CheckBox进⾏设置。
实现效果
本⽂在设计时，希望达到以下效果，如图所⽰，每个带颜⾊的⽅块都是有input框组成，每个input框的背景⾊不同，并且，再点击时，只能同时选中⼀个input框（实现效果相当于radio）。
实现步骤
1、单个input[type=checkbox]样式修改
在设计时，我们使⽤<lable>标签的for属性，绑定到input标签上（for属性应对应到input标签中的id）。代码如下：
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery-2.1.1/jquery.js"></script>
<style>
/*lable标签的⼤⼩、位置、背景颜⾊更改，在css选择时，“+”代表相邻元素，即当前元素的下⼀元素*/
#color-input-red+label {
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 7px;
left: 10px;
background: rgba(240, 84, 77, 1);
}
/*当input框为选中状态时，lable标签的样式，其中在css选择时，“：”表⽰当前input框的值，即checked；该部分主要对显⽰的“对号”的⼤限居中⽅式，显⽰颜⾊进⾏
#color-input-red:checked+label::before {
display: block;
content: "\2714";
text-align: center;
font-size: 16px;
color: #fff;
}
</style>
</head>
<body>
<input id="color-input-red" class="chat-button-location-radio-input" type="checkbox" name="color-input-red"
value="#f0544d" />
<label for="color-input-red"></label>
</body>
<script>
$("#color-input-red").is(":checked");// true
$("#color-input-red").val(); // "#f0544d"
</script>
</html>
其中⾥⾯的content表⽰在⽅框中显⽰的内容，"\2714"、"\2713"都表⽰对号，只是显⽰的瘦弱程度不同，⼤家可以在调试的时候，选择
其中⼀个。对于css中的内容，我们可以根据需要设置为⾃⼰的内容。
最后我们在css中将原先的input[type=checkbox]的内容进⾏隐藏。
/* 原始的checkbox被隐藏 */
input[type=checkbox]{
visibility: hidden;
}
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery-2.1.1/jquery.js"></script>
<style>
/*lable标签的⼤⼩、位置、背景颜⾊更改，在css选择时，“+”代表相邻元素，即当前元素的下⼀元素*/
#color-input-red+label {
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
top: -20px;
background: rgba(240, 84, 77, 1);
}
/*当input框为选中状态时，lable标签的样式，其中在css选择时，“：”表⽰当前input框的值，即checked；该部分主要对显⽰的“对号”的⼤限居中⽅式，显⽰颜⾊进⾏
#color-input-red:checked+label::before {
display: block;
content: "\2714";
text-align: center;
font-size: 16px;
color: #fff;
}
/* 原始的checkbox被隐藏 */
input[type=checkbox]{
visibility: hidden;
}
</style>
</head>
<body>
<input id="color-input-red" class="chat-button-location-radio-input" type="checkbox" name="color-input-red"
value="#f0544d" />
<label for="color-input-red"></label>
<input type="text">
<label for="abcd" >abcd</label>
</body>
<script>
$("#color-input-red").is(":checked");// true
$("#color-input-red").val(); // "#f0544d"
</script>
</html>
最终的显⽰效果如下：
2、实现多个input框样式的调整
单个input框实现完成以后，同理，其他的input框实现也据此实现。使⽤的jsp代码如下（⾥⾯的div标签只是为布局使⽤）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.css">
<script src="../jquery-2.1.1/jquery.js"></script>
<style>
/*input框中颜⾊更改*/
htmlradio的text出不来#color-input-red+label {
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
top: -20px;
background: rgba(240, 84, 77, 1);
}
#color-input-red:checked+label::before {
display: block;
content: "\2714";
text-align: center;
font-size: 16px;
color: white;
}
/* input[type=checkbox] {
visibility: hidden;
} */
#color-input-orange+label {
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
top: -20px;
background: rgba(234, 152, 54, 1);
}
#color-input-orange:checked+label::before {
display: block;
content: "\2714";
text-align: center;
font-size: 16px;
color: white;
}
#color-input-yellow+label {
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
top: -20px;
background: rgba(230, 192, 58, 1);
}
#color-input-yellow:checked+label::before {      display: block;
content: "\2714";
text-align: center;
font-size: 16px;
color: white;
}
#color-input-green+label {
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
top: -20px;
background: rgba(95, 189, 65, 1);
}
#color-input-green:checked+label::before {      display: block;
content: "\2714";
text-align: center;
font-size: 16px;
color: white;
}
#color-input-blue+label {
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
top: -20px;
background: rgba(61, 170, 230, 1);
}
#color-input-blue:checked+label::before {      display: block;
content: "\2714";
text-align: center;
font-size: 16px;
color: white;
}
#color-input-purple+label {
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: relative;
top: -20px;
background: rgba(195, 122, 211, 1);
}
#color-input-purple:checked+label::before {      display: block;
content: "\2714";
text-align: center;
font-size: 16px;
color: white;
}
label{
max-width: initial;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。