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

Answer 2

看起来如果你检查jsFiddle中的元素，向下滚动一下＆amp; .bootstrap-switch的边界半径为4px。

取消选中，摆脱蓝色开关上的半径。

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

<强> CSS

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

@Jaskey也走在正确的轨道上。

jsFiddle

Bootstrap Switch，如何删除整个切换器的边框半径

2 个答案: