本文共 4232 字，大约阅读时间需要 14 分钟。

概述   

 在页面设计时，我们经常使用input复选框。由于界面设计的需要，我们需要修改复选框的样式，使得界面更美观或者适应新的需求。由于CheckBox伪类修改比较复杂，通常修改的方式有两种，一个是链入图片，另一个是使用纯css的方法进行修改。链入图片的设计方式比较简单，但是需要预先设计或者下载图片，比较麻烦。纯css的方法，只需要在css文件中编写代码，个人觉得比较方便，因此，本文使用该方式对input中的CheckBox进行设置。

实现效果  

  本文在设计时，希望达到以下效果，如图所示，每个带颜色的方块都是有input框组成，每个input框的背景色不同，并且，再点击时，只能同时选中一个input框（实现效果相当于radio）。

实现步骤

1、单个input[type=checkbox]样式修改

    在设计时，我们使用<lable>标签的for属性，绑定到input标签上（for属性应对应到input标签中的id）。在jsp代码中设计如下所示：

    接下来我们在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标签只是为布局使用）：

    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

    至此，我们实现了只能选择其中一个功能。如图所示

参考资料：

1、

2、

3、