该手记通过简单教程,实现如图所示的radio单选样式效果
html结构,div中包含一个radio单选框与一个指向该单选框的label标签
苹果
初始化相关结构样式,设置div定位为relative,radio与label为absolute定位
.radio-check {
position: relative;
height: 35px;
}
.radio-check > input {
position: absolute;
left: 0;
top: 0;
width: 20px;
height:20px;
opacity: 0;
}
.radio-check > label {
position: absolute;
left: 30px;
line-height: 20px;
top: 0px;
}
通过伪类::before与::after,实现选中效果
初始化before与after状态
.radio-check > label:before {
content: '';
position: a