html checkbox样式
时间: 2023-10-18 20:15:50 浏览: 80
可以使用 CSS 来自定义 checkbox 样式。以下是一个简单的例子:
HTML 代码:
```html
<label class="checkbox-container">选项1
<input type="checkbox">
<span class="checkmark"></span>
</label>
```
CSS 代码:
```css
/* checkbox 容器 */
.checkbox-container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
cursor: pointer;
font-size: 16px;
}
/* 隐藏原生的 checkbox */
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* checkbox 标记样式 */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
}
/* 勾选状态下的样式 */
.checkbox-container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* 鼠标悬停时的样式 */
.checkbox-container:hover input ~ .checkmark {
background-color: #ccc;
}
/* checkbox 标记的内部勾 */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* 勾选状态下的内部勾 */
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
/* 标记样式 */
.checkbox-container .checkmark:after {
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
```
可以根据需要调整样式中的数值来适应不同的布局和需求。
阅读全文