html - Bootstrap Switch，如何去掉整个switcher的边框半径

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

这是演示

Answer 2

看起来如果您检查 jsFiddle 中的元素，向下滚动一点.bootstrap-switch并且边框半径为 4px。

取消选中会消除蓝色开关上的半径。

所以试试这个（你可能需要使用！important）：

CSS

.bootstrap-switch {
    border-radius: 0;
}

@Jaskey 也在正确的轨道上。

jsFiddle