改变默认的多选框 checkbox 样式~

Posted luwanying

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了改变默认的多选框 checkbox 样式~相关的知识,希望对你有一定的参考价值。

 效果图:

技术分享图片

 

html代码:
<label for="Checkbox1" style="display:none;"></label>
<input type="checkbox" id="Checkbox1" value="option1" class="input_check">

 

CSS代码:
/* 复选框checkbox */
.input_check {
    -moz-appearance: none;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    display: none;
}
/* 未选 */
.input_check{
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 18px;
    height: 18px;
}
input[type=file]:focus, input[type=checkbox]:focus, input[type=radio]:focus{
    outline: none;    /* outline (轮廓)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。outline 属性设置元素周围的轮廓线。*/
}
/* 鼠标滑过未选 */
 input[type=file]:hover, input[type=checkbox]:hover, input[type=radio]:hover{
    border-color: #3bb8f6;
} 
/* 已选 */
.input_check:checked {
    display: inline-block;
    background-image: url(‘../../../assets/img/checkbox2.png‘);
    background-repeat: no-repeat;  
    background-position: 0px 0px; 
    width: 18px;
    height: 18px;
    border: none;
} 
/* 鼠标滑过已选 */
.input_check:checked:hover{
    display: inline-block;
    background-image: url(‘../../../assets/img/checkbox1.png‘);
    background-repeat: no-repeat;  
    background-position: 0px 0px; 
    width: 18px;
    height: 18px;
    border: none;
    outline: none;
}

 

以上是关于改变默认的多选框 checkbox 样式~的主要内容,如果未能解决你的问题,请参考以下文章

ElementUI 将table多选框改为单选框的解决办法

delphi中如何实现checkbox的多选

jquery 循环遍历选中的多选复选框checkbox

怎样改变checkbox的默认蓝色

ElementUI的Table表格添加自定义头CheckBox多选框

0410_gdgrid_checkbox_自己强加的多选,选中,批量删除