Search code examples
javascripthtmlcssbootstrap-switch

Bootstrap Switch, how to remove the outline of the switcher


I am using bootstrap-switch - v3.3.1, but I don't need the defaulted blue outline of the switcher when swithingenter image description here, 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");

Solution

  • Update this css class or override it to:

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