0

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.

JaskeyLam
  • 15,405
  • 21
  • 114
  • 149

2 Answers2

1

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

JaskeyLam
  • 15,405
  • 21
  • 114
  • 149
0

It looks like if you inspect the element in your jsFiddle, scroll down a bit & .bootstrap-switch has a border-radius of 4px.

Unchecking that gets rid of the radius on the blue switch.

So try this (you may need to use !important):

CSS

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

@Jaskey is also on the right track.

jsFiddle

Damon
  • 4,151
  • 13
  • 52
  • 108