You are here
使用css修改input框中checkbox的样式 有大用
概述
在页面设计时，我们经常使用input复选框。由于界面设计的需要，我们需要修改复选框的样式，使得界面更美观或者适应新的需求。由于CheckBox伪类修改比较复杂，通常修改的方式有两种，一个是链入图片，另一个是使用纯css的方法进行修改。链入图片的设计方式比较简单，但是需要预先设计或者下载图片，比较麻烦。纯css的方法，只需要在css文件中编写代码，个人觉得比较方便，因此，本文使用该方式对input中的CheckBox进行设置。
实现效果
本文在设计时，希望达到以下效果，如图所示，每个带颜色的方块都是有input框组成，每个input框的背景色不同，并且，再点击时，只能同时选中一个input框（实现效果相当于radio）。
实现步骤
1、单个input[type=checkbox]样式修改
在设计时，我们使用<lable>标签的for属性，绑定到input标签上（for属性应对应到input标签中的id）。在jsp代码中设计如下所示：
<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 >
接下来我们在css文件中设置lable标签的显示样式：
/*lable标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/
#color-input-red +label{
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 2px;
left: 15px;
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: white;
}
其中里面的content表示在方框中显示的内容，"\2714"、"\2713"都表示对号，只是显示的瘦弱程度不同，大家可以在调试的时候，选择其中一个。对于css中的内容，我们可以根据需要设置为自己的内容。
最后我们在css中将原先的input[type=checkbox]的内容进行隐藏。
input[type=checkbox]{
visibility: hidden;
}
最终的显示效果如下：
2、实现多个input框样式的调整
单个input框实现完成以后，同理，其他的input框实现也据此实现。使用的jsp代码如下（里面的div标签只是为布局使用）：
<div class="chat-windows-color-div row">
<div class="col-xs-4 col-sm-4 col-md-4">
<div class="col-xs-2 col-sm-2 col-md-2">
<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 >
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<input id="color-input-orange" class="chat-button-location-radio-input" type="checkbox" name="color-input-orange" value="#ea9836" />
<label for="color-input-orange"></label >
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<input id="color-input-yellow" class="chat-button-location-radio-input" type="checkbox" name="color-input-yellow" value="#e6c03a" />
<label for="color-input-yellow"></label >
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<input id="color-input-green" class="chat-button-location-radio-input" type="checkbox" name="color-input-green" value="#5fbd41" />
<label for="color-input-green"></label >
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<input id="color-input-blue" class="chat-button-location-radio-input" type="checkbox" name="color-input-blue" value="#3daae6" />
<label for="color-input-blue"></label >
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<input id ="color-input-purple" class="chat-button-location-radio-input" type="checkbox" name="color-input-purple" value="#c37ad3" />
<label for="color-input-purple"></label>
</div>
</div>
</div>
css代码如下如所示：
/*input框中颜色更改*/
#color-input-red +label{
display: block;
width: 20px;
height: 20px;
cursor: pointer;
position: absolute;
top: 2px;
left: 15px;
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: absolute;
top: 2px;
left: 15px;
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: absolute;
top: 2px;
left: 15px;
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: absolute;
top: 2px;
left: 15px;
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: absolute;
top: 2px;
left: 15px;
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: absolute;
top: 2px;
left: 15px;
background: rgba(195, 122, 211, 1);
}
#color-input-purple:checked +label::before{
display: block;
content: "\2714";
text-align: center;
font-size: 16px;
color: white;
}
此时的效果为：
颜色可以全部改变，但是可以全部选中，无法保证只能选择其中一个，为了实现该功能，我们添加js代码。思路为：当点击其中一个复选框时，我们将所有的复选框都进行取消选中处理，然后对当前的复选框单独添加选中状态。
//取消掉所有选择的颜色
function cancelChooseColor( clickId ){
var inputColor = $('#color-input-green').parents(".chat-windows-color-div ").find("input");
for(var i=0;i<inputColor.size();i++){
inputColor[i].checked=false;
}
//选中点击的元素
$(clickId)[0].checked=true;
//获取选中元素的color值
var color =$(clickId).val();
$('#color-input-diy-value').val(color);
}
$(document).on("click","#color-input-red",function(){
cancelChooseColor("#color-input-red");
})
$(document).on("click","#color-input-orange",function(){
cancelChooseColor("#color-input-orange");
})
$(document).on("click","#color-input-yellow",function(){
cancelChooseColor("#color-input-yellow");
})
$(document).on("click","#color-input-green",function(){
cancelChooseColor("#color-input-green");
})
$(document).on("click","#color-input-blue",function(){
cancelChooseColor("#color-input-blue");
})
$(document).on("click","#color-input-purple",function(){
cancelChooseColor("#color-input-purple");
})
至此，我们实现了只能选择其中一个功能。如图所示
参考资料：
1、自定义input[type="checkbox"]的样式。
2、纯CSS设置Checkbox复选框控件的样式 | 朽木博客
3、用纯CSS设置Checkbox复选框控件的样式
————————————————
版权声明：本文为CSDN博主「ONLY&YOU」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：
https://blog.csdn.net/qq_34182808/article/details/79992465
来自 https://blog.csdn.net/qq_34182808/article/details/79992465