选择器的运用
HTML
<label class="input-radio">
<input
type="checkbox"
:checked="isUsrPwd"
><span></span>
</label>
思路：input框让其display:none，运用label相关标记标签的属性来占位，自己写一个可动态切换样式的按钮，点击时切换span:before、span:after的样式。
CSS
.input-radio {
cursor: pointer;
height: 48px;
line-height: 48px;
display: flex;
justify-content: center;
align-items: center;
}
.input-radio span {
display: inline-block;
height: 48px;
line-height: 48px;
padding-left: 24px;
position: relative;
font-size: 12px;
}
.input-radio span:before {
content: '';
position: absolute;
width: 14px;
height: 14px;
border: 2px solid #999;
box-sizing: border-box;
border-radius: 25%; // 如需要圆形的radio,则把这里改为50%；即可
left: 7px;
top: 16px
}
.input-radio span:after {
content: '';
position: absolute;
width: 10px;
height: 10px;
/* background-color: #26a3ff; */
background: #26a3ff url(/static/images/go.png) no-repeat center;
background-size: 14px 14px;
box-sizing: border-box;
border-radius: 1%; // 如需要圆形的radio,则把这里改为50%；即可
left: 9px;
top: 18px;
opacity: 0;
}
.input-radio input {
display: none;
}
// input-radio下面的input被选中的情况下，后面的span:before修改样式
// ~：后面的所有元素；+：后面紧挨着的那个元素
.input-radio input:checked ~ span:before {
border-color: #26a3ff;
transition: border-color 0.5s ease-in;
}
.input-radio input:checked ~ span:after {
opacity: 1;
transition: opacity 0.3s ease-in;
}
修改前后对比
图片.png
图片.png
图片.png
