css checkbox
时间: 2023-11-27 11:48:11 浏览: 29
CSS checkbox是指通过CSS样式来美化HTML中的复选框(checkbox)元素。以下是两种常见的CSS checkbox样式方案:
方案一:设置checkbox为appearance:none,不应用任何特殊样式
```css
input[type="checkbox"] {
-webkit-appearance: none; /* 去除系统默认appearance的样式 */
width: 25px;
height: 25px;
position: relative;
margin-right: 10px;
border: 2px solid #fff;
border-radius: 50%;}
```
方案二:自定义checkbox样式,添加选中样式和过渡效果
```css
input[type="checkbox"] {
-webkit-appearance: none; /* 去除系统默认appearance的样式 */
width: 25px;
height: 25px;
position: relative;
margin-right: 10px;
border: 2px solid #fff;
border-radius: 50%;
transition: all 0.3s ease-in-out; /* 添加过渡效果 */
}
input[type="checkbox"]:checked::before {
content: "\2713"; /* 添加选中样式 */
font-size: 20px;
color: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
```