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

看起来如果你在你的 jsFiddle 中检查元素，向下滚动一点 & .bootstrap-switch 有一个 4px 的边框半径。

取消勾选会去掉蓝色开关上的半径。

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

CSS

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

@Jaskey 也在正确的轨道上。

jsFiddle

Answer 2

我通过设置解决问题：

/**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

Bootstrap switch，如何去掉整个switcher的border radius

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

html

css

bootstrap-switch