html - Bootstrap Switch，如何去掉整个switcher的border radius

Question

我刚刚使用了 bootstrap-switch - v3.3.1，我不需要边界半径所以我将 border-radius:0 !important; 设置为 .bootstrap-switch.bootstrap -switch-focused 像这样: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;
}

但是我们可以看到切换器内部有一个小半径的边框。

如何在不影响全局切换器的情况下将整个切换器更改为方形边框。

Answer 1

我通过设置解决问题:

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

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

这是 DEMO