bootstrap 复选框选中样式怎么修改?
时间: 2024-12-14 18:23:53 浏览: 1
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Bootstrap 的复选框默认样式可以通过 CSS 进行自定义来改变选中的外观。你可以通过以下几个步骤来调整 Bootstrap v4 中 `form-check` 或 `custom-control-input` 类的选择器:
1. 首先,在你的 CSS 文件中,或者在 `<head>` 标签内添加一个内部样式块(如 `<style>`),然后选择 `.form-check-input:checked`, `.custom-control-input:checked` 作为目标选择器。
```css
/* 修改单选框选中的颜色 */
.form-check-input:checked {
background-color: #your-custom-color; /* 按需替换为你的颜色值,例如 red, green, #007bff等 */
}
/* 或者针对 custom-control 的复选框 */
.custom-control-input:checked {
background-color: #your-custom-color;
}
/* 可以同时修改边框和圈勾的颜色 */
.form-check-input:checked::before,
.custom-control-input:checked::after {
color: #your-custom-color; /* 更改勾选标记的颜色 */
}
/* 如果需要改变鼠标悬停状态 */
.form-check-input:hover ~ .form-check-label,
.custom-control-input:hover ~ .custom-control-label {
color: #your-hover-color; /* 按需设置鼠标悬停时的文字颜色 */
}
```
记得将 `#your-custom-color` 和 `#your-hover-color` 替换为你想要的实际颜色值。
阅读全文