如何修改Bootstrap开关组件点击时的淡蓝色光晕样式？

• 先精准定位开关对应的<input type="checkbox" class="form-check-input form-switch">原生元素——Bootstrap开关的视觉样式是通过该元素的伪类、伪元素实现的，而非额外的独立DOM节点。
• 在浏览器开发者工具的「Elements」面板中，勾选「Show pseudo elements」选项，就能看到开关滑块对应的::after伪元素，进而查看其关联的CSS规则。
• 若找聚焦状态的样式，直接在「Styles」面板的搜索框中输入box-shadow或focus-ring，快速定位到input:focus对应的样式规则。

要自定义开关样式，直接编写优先级更高的CSS规则覆盖Bootstrap默认样式即可：

/* 自定义开关聚焦时的阴影 */
.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.25); /* 替换为你需要的颜色和扩散范围 */
}

/* 自定义开关滑块的样式 */
.form-switch .form-check-input::after {
  width: 1.25rem;
  height: 1.25rem;
  background-color: #f8f9fa;
}

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