复选框对勾颜色设置
时间: 2023-07-04 21:11:45 浏览: 82
复选框对勾颜色可以通过 CSS 的伪元素 ::before 或 ::after 和 content 属性来设置。具体步骤如下:
1. 首先,定义一个空的 span 元素,作为复选框。
2. 使用 CSS 的 content 属性,在 span 元素内添加一个对勾(Unicode 编码为 \2713)。
3. 使用 CSS 的伪元素 ::before 或 ::after,将对勾显示在复选框的左侧或右侧。
4. 通过设置伪元素的颜色属性,设置对勾的颜色。
下面是一个示例代码:
HTML 代码:
```
<label>
<span class="checkbox"></span>
复选框
</label>
```
CSS 代码:
```
label {
display: inline-block;
cursor: pointer;
font-size: 14px;
line-height: 1.5;
}
.checkbox {
display: inline-block;
width: 16px;
height: 16px;
margin-right: 6px;
border: 1px solid #ccc;
vertical-align: middle;
position: relative;
}
.checkbox::before {
content: '\2713';
font-size: 12px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
.checkbox:checked::before {
opacity: 1;
}
.checkbox::after {
content: '';
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
margin-top: -5px;
margin-left: -5px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.checkbox:checked::after {
background-color: #007bff;
}
```
在上面的代码中,使用了 ::before 和 ::after 伪元素来实现对勾的显示。其中,::before 伪元素使用 content 属性添加对勾,通过设置 opacity 属性来控制对勾的显示和隐藏;::after 伪元素用来显示复选框的框和背景色,通过设置 background-color 属性来控制复选框选中时的背景色。
相关推荐
![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)