Bootstrap Switch，如何去掉切换器的轮廓答案

【问题标题】：Bootstrap Switch, how to remove the outline of the switcherBootstrap Switch，如何去掉切换器的轮廓
【发布时间】：2015-04-21 02:31:21
【问题描述】：

我正在使用 bootstrap-switch - v3.3.1，但在 swithing 时不需要切换器的默认蓝色轮廓，我将 style="outline: 0 none; 设置为输入但它不起作用。

这是我的html：

            <div class="switch" style="display:inline-block;>
                <input id="accu-switcher" type="checkbox" style="outline: 0 none;" checked data-label-text="TEXT"/>
            </div>

JS：

 $('#accu-switcher').bootstrapSwitch({size: "mini",state: false});
        $('.module .switch').css("visibility","visible");

【问题讨论】：

标签： javascript html css bootstrap-switch

【解决方案1】：

更新这个css类或覆盖它：

.bootstrap-switch.bootstrap-switch-focused
{
    outline: none;
    box-shadow: none;
}

【讨论】：

【解决方案2】：

css:

.bootstrap-switch:focus {
  outline: none;
}

【讨论】：

【解决方案3】：

Bootstrap 开关具有以下 css 负责发光，outline: none; 单独不会删除它。 (Bootstrap switch css file)

.bootstrap-switch.bootstrap-switch-focused {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
}

应该这样做

.bootstrap-switch{
  border-color: #66afe9; /*you can change this depending on your application's background color */
  outline: 0 !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

这是一个DEMO

【讨论】：