Css 如何自定义引导开关颜色

如何将引导开关颜色自定义为所需颜色

我发现了一个

oncolor

和

offcolor

，但不知道如何更改它们。

根据每个选项也是一种方法。因此，您可以像这样应用onColor和OffColor：

$("#sw").bootstrapSwitch({onColor: 'danger'});

$("#sw").bootstrapSwitch();
...
$("#sw").bootstrapSwitch('onColor', 'danger');

$("#sw").bootstrapSwitch({onColor: 'retroorange'});

或者像这样：

$("#sw").bootstrapSwitch({onColor: 'danger'});

$("#sw").bootstrapSwitch();
...
$("#sw").bootstrapSwitch('onColor', 'danger');

$("#sw").bootstrapSwitch({onColor: 'retroorange'});

或替代库的默认选项：

$.fn.bootstrapSwitch.defaults.onColor = 'danger';

要使用自己的颜色，需要创建自己的CSS类。例如，此类将“retroorange”名称与您的颜色一起使用：

.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-retroorange,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-retroorange {
  color: #fff;
  background: #ff9933;
}

然后，您可以像这样使用

'retroorange'

：

$("#sw").bootstrapSwitch({onColor: 'danger'});

$("#sw").bootstrapSwitch();
...
$("#sw").bootstrapSwitch('onColor', 'danger');

$("#sw").bootstrapSwitch({onColor: 'retroorange'});

---

谢谢@alemv，但我想用我自己的颜色，比如这个：#ff9933！我在答案中添加了一个如何使用自己颜色的方法。所以我应该使用css定义的类？是的，请参阅bootstrap-switch.org的链接不再有效。它要么进入一个域占位符，要么有时进入一个邪恶的“你的Flash插件已经过时”页面。