如何修改data-toggle切换按钮背景色并设置自定义颜色代码

第一步：修改原有HTML配置 #

将原代码中data-onstyle、data-offstyle的默认样式名替换为自定义类名，示例如下：

<input type="checkbox" class="" 
      data-toggle="toggle" 
      data-onstyle="custom-on" 
      data-offstyle="custom-off" 
      data-on="Blocked" 
      data-off="Active"  />

如果需要调整按钮显示文字，也可以自行修改data-on、data-off的属性值。

第二步：添加自定义CSS样式 #

在你的样式文件中加入以下代码，替换其中的色值为你需要的自定义颜色即可：

/* 切换到开启状态的样式 */
.toggle-on.custom-on {
    background-color: #d9363e; /* 示例红色，可自行修改 */
    border-color: #d9363e;
    color: #ffffff;
}

/* 切换到关闭状态的样式 */
.toggle-off.custom-off {
    background-color: #36ad6a; /* 示例绿色，可自行修改 */
    border-color: #36ad6a;
    color: #ffffff;
}

/* 可选：配置鼠标悬浮时的样式 */
.toggle.btn.custom-on:hover {
    background-color: #c12a32;
    border-color: #c12a32;
}
.toggle.btn.custom-off:hover {
    background-color: #2f995d;
    border-color: #2f995d;
}

如果样式没有生效，可以给CSS选择器增加更高的优先级，比如在前面添加页面父元素的类名，或者临时在属性值后加!important应急处理。

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