css radio check
时间: 2023-07-29 08:13:47 浏览: 52
如果你想通过 CSS 美化单选框或复选框,可以使用以下方法:
1. 隐藏默认的单选框或复选框,使用自定义的样式来代替。
```css
input[type="radio"], input[type="checkbox"] {
display: none;
}
```
2. 使用自定义样式来代替隐藏的单选框或复选框。
```css
input[type="radio"] + label,
input[type="checkbox"] + label {
display: inline-flex;
align-items: center;
cursor: pointer;
padding-left: 25px;
position: relative;
margin-right: 15px;
}
input[type="radio"] + label:before,
input[type="checkbox"] + label:before {
content: '';
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
border-radius: 50%;
border: 2px solid #ccc;
}
input[type="radio"]:checked + label:before,
input[type="checkbox"]:checked + label:before {
background-color: #007bff;
border-color: #007bff;
}
```
这些 CSS 样式将隐藏默认的单选框或复选框,并且使用自定义的样式来代替。其中,`:before` 伪类用于添加一个圆形的背景,以表示已选中的单选框或复选框。`:checked` 选择器用于对已选中的单选框或复选框进行样式设置。
相关推荐
![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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)