两种方式~
一种是自己写一个checkbox的样式,如下:
input[type="checkbox"]{
width:0.64rem;
height:0.64rem;
display: inline-block;
text-align: center;
vertical-align:baseline;
line-height: 0.64rem;
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;
}
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;
}
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: 0.52rem;
border-radius: 50%;
}
input[type="checkbox"]:disabled::before{
background: #eee;
cursor: default;
}
显示为
另外一种为用用背景图写下他的默认样式,如下:
input[type="checkbox"]{
width:0.6rem;
height:0.6rem;
display: inline-block;
text-align: center;
vertical-align: -0.09rem;
line-height: 0.6rem;
position: relative;
border-radius: 50%;
outline: none;
-webkit-appearance: none;
background: none;
border:none;
}
input[type="checkbox"]::before{
content: "";
position: absolute;
top: 0;
left: 0;
background: url('/h5/img/app/select.png') no-repeat;
background-size: 0.6rem;
width: 100%;
height: 100%;
border-radius: 50%;
color: #fff;
}
input[type="checkbox"]:checked::before{
content: "";
background: url('/h5/img/app/selected.png') no-repeat;
background-size: 0.6rem;
position: absolute;
top: 0;
left: 0;
width:100%;
color:#fff;
font-size: 0.52rem;
border-radius: 50%;
}
input[type="checkbox"]:disabled::before{
background: #bbb;
cursor: default;
border:1px solid #999;
box-sizing: border-box;
}
显示为: