单选按钮样式修改

单选按钮样式修改

在单选按钮中,默认样式是不能修改的,但我们可以自己写样式替换默认样式,主要用到伪类input:checked
label没有将input包裹的话,需要用for来关联input的id
效果:

<style>
label {
position: relative;
padding-left: 1rem;
}
label::before {
content: '';
width: 0.6rem;
height: 0.6rem;
border: 1px #ccc solid;
border-radius: 50%;
display: inline-block;
position: absolute;
top: 50%;
margin-top: -0.3rem;
left: 0;
box-sizing: border-box;
}
input {
display: none;
}
input:checked+label::before{
border: 1px #F05D4E solid;
}
input:checked+label::after {
content: '';
width: 0.3rem;
height: 0.32rem;
display: inline-block;
border-radius: 50%;
position: absolute;
top: 50%;
margin-top: -0.15rem;
background: #F05D4E;
left: 0.15rem;
}
</style>
<input type="radio" name="laiyuan" value="淘宝" id="taobao"><label for="taobao">淘宝</label>
<input type="radio" name="laiyuan" value="天猫" id="tamll"><label for="tamll">天猫</label>
<input type="radio" name="laiyuan" value="京东" id="jd"><label for="jd">京东</label>
<input type="radio" name="laiyuan" value="拼多多" id="pinduoduo"><label for="pinduoduo">拼多多</label>
<input type="radio" name="laiyuan" value="阿里巴巴" id="1688"><label for="1688">阿里巴巴</label>