话不多说,直接上效果图:
一、使用的基本div:
正常复选框
复选框checked
复选框disableed
二、自定义样式:
input[type=checkbox] {
margin-right: 10px;
cursor: pointer;
width: 15px;
height: 15px;
position: relative;
}
input[type=checkbox]:after {
position: absolute;
width: 10px;
height: 15px;
top: 0;
content: " ";
background-color: #fff;
color: #fff;
display: inline-block;
visibility: visible;
border: 1px solid grey;
padding: 0 3px;
border-radius: 3px;
}
input[type=checkbox]:checked:after {
background-color: #0f97e7;
content: "✓";
font-size: 12px;
}
input[type=checkbox]:disabled:after {
width: 10px;
height: 15px;
top: 0;
color: #fff;
display: inline-block;
visibility: visible;
border: 1px solid grey;
padding: 0 3px;
border-radius: 3px;
background-color: #E9E7E3;
content: "✓";
font-size: 12px;
}
三、另外一种使用图片的:
input[type="checkbox"] {
display: none;
-webkit-appearance: none;
/*去除系统默认appearance的样式,常用于IOS下移除原生样式*/
margin: 0;
}
.check-item .check-item-in+label {
width: 22px;
height: 22px;
display: inline-block;
background: #fff url(./checkbox_01.png) no-repeat;
background-size: contain;
cursor: pointer;
}
.check-item .check-item-in:checked+label {
background: #fff url(./checkbox_02.png) no-repeat;
background-size: contain;
}
.check-item-in:disabled+label {
background: #fff url(./checkbox_03.png) no-repeat;
background-size: contain;
}
附:Radio的去除默认样式和自定义样式
input[type = "radio"] {
appearance: none;
-webkit-appearance: none;
outline: none;
margin: 0;
vertical-align: text-bottom;
margin-right: 0.1rem;
}
.checked:after {
content: "\2713";
position: absolute;
left: 62%;
top: 61%;
display: block;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
background: #0555b8;
color: #fff;
border: 1px solid #0555b8;
border-radius: 50%;
z-index: 99;
margin: -15px 0 0 -15px;
}
$('input[type="radio"]').click(function () {
$('[name=' + $(this).attr('name') + ']').each(function () {
$(this).removeClass('checked');
});
$(this).addClass('checked');
});
供大家学习和参考~~
html去除radio的样式 【HTML+CSS】纯CSS设置checkbox大小和样式 附Radio的去除默认样式和自定义样式...