Search code examples
htmlcssbootstrap-switch

Bootstrap Switch, how to remove the border radius of the whole switcher

I just used bootstrap-switch - v3.3.1, I don't need the border radius so I set border-radius:0 !important; to .bootstrap-switch.bootstrap-switch-focused like this: http://jsfiddle.net/q2zEk/1/.

.bootstrap-switch.bootstrap-switch-focused {
    border-color: #cacaca;
    outline: none !important;;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0 !important;
}

But we can see that there are a small radius border inside the switcher.

How can I change the entire switcher to square border, without affecting the global switchers.

Solution

  • I solve the problem by setting :

    /**wrapper border*/
.bootstrap-switch
{
    border-radius: 0px;
}

/**on/off border**/
.bootstrap-switch .bootstrap-switch-handle-on , .bootstrap-switch-handle-off {
    border-radius: 0px !important;
}

    Here is the DEMO