【如何修改radio单选按钮的样式 _radio 】

如何修改radio单选按钮的样式

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

radio

详细描述

截图

代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body{
      max-width: 1200px;
      margin: 20px auto;
    }
    [type="radio"]{
      border: 0;
      background: white;
    }
  </style>
</head>
<body>
  <input type="radio" name="1">选项一
  <br>
  <input type="radio" name="1">选项二
</body>
</html>

编辑于2024-11-24

时间排序

热门排序

[成都|荣耀师兄]JS-胡力耘
0
修改radio按钮样式的方法
单纯的修改radio按钮的border background-color 的属性是无法修改radio按钮的样式的。
原理：
把原先的input按钮隐藏掉，通过伪元素，在label标签前画一个自定义的图案，比如圆形。再把label和input元素通过for属性和id属性绑定在一起，再添加input:checked效果，即可完成美化按钮。具体步骤如下：
```
<body>
  <input type="radio" name="1"><label>选项一label>
  <br>
  <input type="radio" name="1"><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
```
<body>
  <input type="radio" name="1" id="item1"><label for="item1">选项一label>
  <br>  <input type="radio" name="1" id="item2"><label for="item2">选项二label>
body>
```
只需要将input的id属性与label的item属性一一对应起来就可以了。
此时可以通过点击label使我们的自定义按钮发生变化了。
最后一步：
隐藏input按钮
```
input[type="radio"]{     
   display: none;
 }
```
大功告成！
查看全部>
编辑于2018-06-10

去第页

修改radio按钮样式的方法

原理：

1.第一步：通过伪元素 画出label前的图案

2.第二步：通过input元素伪类checked添加点击效果

3.第三步：通过for与id属性绑定input和label

最后一步：

大功告成！

1.第一步：通过伪元素画出label前的图案