html中radio按键改button,【如何修改radio单选按钮的样式 _radio 】 | IT修真院·坑乎...

修改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;

}

大功告成！