如何个性化定制Bootstrap 5中的Switch Checkbox开关复选框

Bootstrap 5.2的开关组件中，圆形滑块是通过.form-check-input的::after伪元素实现的。要修改它的样式，只需在自定义CSS文件（比如你的style.css）中覆盖默认属性即可，注意确保自定义CSS在Bootstrap的样式文件之后引入（你的代码已经满足这一点）。

基础样式修改示例 #

以下代码可以调整滑块的大小、颜色、边框等基础样式：

/* 未选中状态下的滑块样式 */
.form-check-input::after {
    /* 调整滑块尺寸 */
    width: 1.25rem;
    height: 1.25rem;
    /* 滑块背景色 */
    background-color: #ffffff;
    /* 滑块边框 */
    border: 1px solid #adb5bd;
    /* 保持圆形（若要修改形状可调整border-radius） */
    border-radius: 50%;
}

/* 选中状态下的滑块样式 */
.form-check-input:checked::after {
    /* 选中后滑块保持白色（可根据需求修改） */
    background-color: #ffffff;
}

/* 可选：调整开关轨道的样式 */
.form-check-input {
    /* 轨道宽度和高度 */
    width: 2.5rem;
    height: 1.5rem;
    /* 未选中时轨道背景 */
    background-color: #e9ecef;
}

.form-check-input:checked {
    /* 选中时轨道背景 */
    background-color: #0d6efd;
}

进阶样式扩展 #

如果需要添加hover、聚焦等交互效果，可以补充以下代码：

/* 鼠标悬停时的滑块阴影 */
.form-check-input:hover::after {
    box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

/* 滑块聚焦时的高亮效果 */
.form-check-input:focus::after {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

关键注意点 #

• 选择器权重：如果默认样式没有被覆盖，可以给选择器添加父类前缀（比如.back .form-check-input::after）来提升权重，确保自定义样式生效。
• 过渡效果：Bootstrap默认给开关添加了过渡动画，若要修改过渡时长或属性，可以在.form-check-input中添加transition属性调整。

内容的提问来源于stack exchange，提问作者Deotyma