修改radio按钮样式的方法
单纯的修改radio按钮的border background-color 的属性是无法修改radio按钮的样式的。
原理:
把原先的input按钮隐藏掉,通过伪元素,在label标签前画一个自定义的图案,比如圆形。 再把label和input元素通过for属性和id属性绑定在一起,再添加input:checked效果,即可完成美化按钮。具体步骤如下:
选项一label>
选项二label>body>
此时效果如下:
1.第一步:通过伪元素 画出label前的图案label{
position: relative;
margin: 0 20px;
}
label::before{
position: absolute;
left: -20px;
width: 16px;
height: 16px;
border: 1px solid #399bfd;
border-radius: 50%;
content: ""; b
ox-sizing: border-box;}
2.第二步:通过input元素伪类checked添加点击效果input:checked+label::before{
background-color: white;
border: 5px solid #399bfd;}
此时点击input的radio按钮,发现我们自己画的图形也会发生改变了。 但是直接点击我们的图形是没有任何效果的。
3.第三步:通过for与id属性绑定input和label
选项一label>
选项二label>
body>
只需要将input的id属性与label的item属性一一对应起来就可以了。
此时可以通过点击label使我们的自定义按钮发生变化了。
最后一步:
隐藏input按钮input[type="radio"]{
display: none;
}
大功告成!