CSS/HTML复选框自定义样式
话不多说 直接上代码
HTML
<div class="circle-check">
<input type="checkbox" />
</div>
<div class="square-check">
<input type="checkbox">
</div>
CSS
/* 自定义复选框样式 */
.circle-check>input[type="checkbox"] {
width: 1.54rem;
height: 1.54rem;
display: inline-block;
text-align: center;
vertical-align: baseline;
line-height: 1.54rem;
position: relative;
border-radius: 50%;
outline: none;
-webkit-appearance: none;
border: 1px solid #fff;
-webkit-tab-highlight-color: rgba(0, 0, 0, 0);
color: #fff;
background: #fff;
}
.circle-check>input[type="checkbox"]::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #999999;
border-radius: 50%;
color: #fff;
}
.circle-check>input[type="checkbox"]:checked::before {
content: "\2713";
background-color: #657AFE;
border: 1px solid #657AFE;
position: absolute;
top: 0;
left: 0;
width: 100%;
color: #fff;
font-size: 1.1rem;
border-radius: 50%;
}
.circle-check>input[type="checkbox"]:disabled::before {
background: #eee;
cursor: default;
}
.square-check>input[type="checkbox"] {
width: 1.54rem;
height: 1.54rem;
display: inline-block;
text-align: center;
vertical-align: baseline;
line-height: 1.54rem;
position: relative;
outline: none;
-webkit-appearance: none;
border: 1px solid #fff;
-webkit-tab-highlight-color: rgba(0, 0, 0, 0);
color: #fff;
background: #fff;
}
.square-check>input[type="checkbox"]::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #999999;
color: #fff;
}
.square-check>input[type="checkbox"]:checked::before {
content: "\2713";
background-color: #657AFE;
border: 1px solid #657AFE;
position: absolute;
top: 0;
left: 0;
width: 100%;
color: #fff;
font-size: 1.1rem;
}
.square-check>input[type="checkbox"]:disabled::before {
background: #eee;
cursor: default;
}
最后放上效果图