GIF.gif
关键点是+号选择器，其他选择器学习可以参考这个CSS 选择器参考手册
css样式文件奉上
ul,li{
list-style: none;
}
/*取紧邻input的下一个label*/
input+label{
width: 14px;height: 14px;display: inline-block;
border: 1px solid #189cfb;border-radius: 50%;
text-align: center;line-height: 12px;
margin-right: 5px;
}
input{
display: none;
}
input+label:after{
transition: 0.3s;
transform: scale(0.8);
content: '';
display: inline-block;
width: 10px;height: 10px;border-radius: 50%;
background-color: #fff;
}
input:checked+label:after{
background-color: #189cfb;transform: scale(1);
}
li{
display: flex;align-items: center;height: 46px;
}
label{
cursor: pointer;font-size: 16px;
}
/*不可选中*/
input:disabled+label{
border-color: #aaa;
}
input:disabled+label+label{
color: #aaa;text-decoration: line-through;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>【radio】css优化原生组件之单选</title>
</head>
<body>
<ul>
<li>
<input type="radio" disabled="true" name="sex" id="s3"><label for="s3"></label>
<label for="s3">满100元可用</label>
</li>
<li>
<input type="radio" name="sex" id="s1"><label for="s1"></label>
<label for="s1">商家优惠套餐</label>
</li>
<li>
<input type="radio" name="sex" id="s2"><label for="s2"></label>
<label for="s2">下单立减5元优惠券</label>
</li>
<li>
<input type="radio" name="sex" id="s4"><label for="s4"></label>
<label for="s4">立享8折</label>
</li>
</ul>
</body>
</html>
网友评论