css checkbox 选择时border设置
时间: 2023-10-27 22:26:43 浏览: 54
你可以使用 CSS 的 `:checked` 伪类选择器和 `border` 属性来设置 checkbox 选中时的边框样式。
例如,下面的 CSS 代码可以让 checkbox 选中时显示为蓝色实线边框:
```
input[type="checkbox"]:checked {
border: 1px solid blue;
}
```
你可以根据需要修改边框的颜色、粗细、样式等属性来实现不同的效果。
相关问题
css checkbox
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%);
}
```
css 改变checkbox样式
可以通过以下步骤改变 checkbox 的样式:
1. 隐藏原生的 checkbox:
```css
input[type="checkbox"] {
display: none;
}
```
2. 创建自定义的 checkbox 样式:
```css
.checkbox {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #ccc;
background-color: #fff;
}
.checkbox.checked {
background-color: #ccc;
}
```
3. 在 label 中使用自定义的 checkbox 样式,并与原生的 checkbox 绑定:
```html
<label>
<div class="checkbox"></div>
<input type="checkbox" onchange="this.previousElementSibling.classList.toggle('checked')" />
Label Text
</label>
```
这样就可以通过 CSS 改变 checkbox 的样式了。