欢迎各位兄弟 发布技术文章
这里的技术是共享的
概述
在页面设计时,我们经常使用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