Search code examples
cssbootstrap-4box-shadow

Overlapping box-shadows on adjacent active buttons in checkbox button group

When toggling (active) adjacent buttons in the example provided in https://getbootstrap.com/docs/4.0/components/buttons/#checkbox-and-radio-buttons the box-shadow overlaps from one button to another.

enter image description here

The box shadow for each button is simply:

box-shadow: 0 0 0 0.2rem rgba(134,142,150,.5)

Is there a way that we could prevent this? It looks broken, specially when more than two buttons are adjacent.

Solution

  • If you want the box shadows to overlap into one consistent color, you can do the following:

    box-shadow: 0 0 0 0.2rem rgb(194,198,202)

    If you do not want the box shadows to overlap, you can the the following:

    .btn-secondary:not([disabled]):not(.disabled).active {
  box-shadow:
    0 -0.2rem rgba(134,142,150,.5),
    0 0.2rem rgba(134,142,150,.5);   
}

label.btn-secondary:not([disabled]):not(.disabled).active:first-child {
  box-shadow:
    -0.2rem 0 0  0.2rem rgba(134,142,150,.5);   
}

label.btn-secondary:not([disabled]):not(.disabled).active:last-child {
  box-shadow:
    0.2rem 0 0  0.2rem rgba(134,142,150,.5);  
}