javascript - Bootstrap Switch, how to remove the outline of the switcher - Stack Overflow

admin管理员组

文章数量:1415460

I am using bootstrap-switch - v3.3.1, but I don't need the defaulted blue outline of the switcher when swithing, I set style="outline: 0 none; for the input but it does not work.

Here is my 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");

I am using bootstrap-switch - v3.3.1, but I don't need the defaulted blue outline of the switcher when swithing, I set style="outline: 0 none; for the input but it does not work.

Here is my 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

Share Improve this question Follow asked Apr 21, 2015 at 2:31 JaskeyLamJaskeyLam 15.8k2323 gold badges128128 silver badges158158 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Update this css class or override it to:

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

css:

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

Bootstrap switch has the following css which is responsible for the glow and outline: none; alone will not remove it . (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);
}

Something like this should do it

.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;
}

Here is a DEMO

本文标签： javascriptBootstrap Switchhow to remove the outline of the switcherStack Overflow