radio 选中时的标准css
时间: 2023-07-26 18:36:57 浏览: 53
当你选中一个 radio 时,可以使用 CSS 来修改其样式。以下是一个示例代码:
```css
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 50%;
border: 2px solid black;
width: 20px;
height: 20px;
margin-right: 10px;
}
input[type="radio"]:checked::before {
content: "";
display: block;
border-radius: 50%;
background-color: black;
width: 10px;
height: 10px;
margin: 4px;
}
```
在这个代码中,我们首先使用 `appearance` 属性来去掉 radio 默认的样式,然后设置了一个圆形的外观,使用了 `border-radius` 属性来设置圆角,使用了 `border` 属性来添加一个黑色的边框,使用了 `width` 和 `height` 属性来设置宽度和高度。我们还使用了 `margin-right` 属性来设置 radio 和文字之间的间距。
接下来,使用了 `:checked` 伪类来设置选中时的样式。我们使用了 `::before` 伪元素来创建一个圆形,使用了 `content` 属性来添加内容,然后设置了圆形的样式,包括圆角、背景色、宽度和高度,并使用了 `margin` 属性来设置圆形和外层圆形的间距。
这个样式可以使 radio 选中时显示一个实心的圆形。你可以根据自己的需要来修改这个样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)