使用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复选框控件的样式