单选按钮样式修改
在单选按钮中,默认样式是不能修改的,但我们可以自己写样式替换默认样式,主要用到伪类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>
