html checkbox 样式
时间: 2023-07-01 17:05:54 浏览: 148
HTML checkbox 可以使用 CSS 来自定义样式。以下是一个示例:
HTML 代码:
```html
<label class="checkbox-container">Check me
<input type="checkbox">
<span class="checkmark"></span>
</label>
```
CSS 代码:
```css
/* 隐藏默认的 checkbox */
.checkbox-container input {
display: none;
}
/* 定义 checkbox 的外观 */
.checkbox-container .checkmark {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
margin-right: 10px;
}
/* 定义 checkbox 被选中时的样式 */
.checkbox-container input:checked + .checkmark {
background-color: #2196F3;
}
/* 定义 checkbox hover 时的样式 */
.checkbox-container:hover input:not(:checked) + .checkmark {
border-color: #2196F3;
}
/* 定义 checkmark 的样式 */
.checkbox-container .checkmark:after {
content: "";
display: none;
}
/* 定义 checkbox 被选中时 checkmark 的样式 */
.checkbox-container input:checked + .checkmark:after {
display: block;
}
.checkbox-container .checkmark:after {
width: 6px;
height: 12px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-top: -6px;
margin-left: 6px;
}
```
这个示例定义了一个 checkbox 容器,包含一个隐藏的 checkbox 和一个样式化的 checkmark。当 checkbox 被选中时,checkmark 的颜色会变成蓝色。当鼠标悬停在 checkbox 容器上时,未被选中的 checkbox 的边框颜色会变成蓝色。checkmark 是用 CSS 伪元素来创建的。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)