html自定义checkbox样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html自定义checkbox样式相关的知识，希望对你有一定的参考价值。
参考技术A 就是将浏览器原生checkbox隐藏，对label进行相关操作。因为label和checkbox时绑在一起的，所以点击label就会选中1）将原生的checkbox隐藏
2）设置checkbox样式
.mark 是label的class，所以 ::before 就是设置label前面的样式
3）设置check选中后的样式
自定义checkbox（对勾）和radio样式
checkbox:
html:
<div>
<label class="unSelected selected" for="choose">
<checkbox clsss="choose"/>
</label>
</div>
css:
.unSelected{
display: inline-block;
width:.2rem;
height:.2rem;
border-radius:50%;
background-color:#ffffff;
border: .02rem solid #999999;
}
.selected{
border: none;
display: inline-block;
width:.22rem;
height:.22rem;
border-radius:50%;
background-color:#0375FB;
position: relative;
}
.selected:after {
content: ‘ 0a0‘;
display: inline-block;
border: .02rem solid #fff;
border-top-width: 0;
border-right-width: 0;
width: .1rem;
height: .05rem;
-webkit-transform: rotate(-50deg);
position: absolute;
top:.06rem;
left:.05rem;
}
radio
html:
<div class="radio" v-for="(ik,iv) in v.answerItem">
<input :id="‘radio-‘+ik" :name="‘radio‘+k" type="radio" :value="iv.value" v-model="v.inputAnswer"/>
<label :for="‘radio-‘+ik" class="radio-label">{{iv.label}}</label>
</div>
css:
.radio {
margin-bottom: .08rem;
}
.radio label {
color: rgba(102, 102, 102, 1);
font-size: .16rem;
text-align: left;
font-family: PingFangSC-regular;
}
.radio input[type="radio"] {
position: absolute;
opacity: 0;
}
.radio input[type="radio"]+.radio-label:before {
content: ‘‘;
background: #f4f4f4;
border-radius: 100%;
border: 1px solid #b4b4b4;
display: inline-block;
width: 1.2em;
height: 1.2em;
position: relative;
top: .1em;
margin-right: .5em;
vertical-align: top;
cursor: pointer;
text-align: center;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
.radio input[type="radio"]:checked+.radio-label:before {
background-color: #3197EE;
box-shadow: inset 0 0 0 5px #f4f4f4;
}
.radio input[type="radio"]:focus+.radio-label:before {
outline: none;
border-color: #3197EE;
}
.radio input[type="radio"]:disabled+.radio-label:before {
box-shadow: inset 0 0 0 4px #f4f4f4;
border-color: #b4b4b4;
background: #b4b4b4;
}
.radio input[type="radio"]+.radio-label:empty:before {
margin-right: 0;
}
以上是关于html自定义checkbox样式的主要内容，如果未能解决你的问题，请参考以下文章