title: Getting a Border/background Around Slider CSS/HTML
body: <p>please see: <a href="https://i.stack.imgur.com/fyDxE.png" rel="nofollow noreferrer">image of problem</a></p>
  <p>What I am building: <a href="https://i.stack.imgur.com/onvph.png" rel="nofollow noreferrer">slider images</a></p>
  <p>I am getting an unwanted light blue border around my slider, I have tried to style out the :active psuedo class to prevent this with no luck. Below is my code (HTML equivalent commented out)</p>
  <p>PS: I have a built in funciton rem that converts pixels to rems basically.</p>
  <p>Thanks in advance :)</p>
  <pre><code>&lt;div class=&quot;slider--toggle&quot;&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;switch&quot; /&gt;
    &lt;label for=&quot;switch&quot;&gt;
    &lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  <pre><code>.slider--toggle {
    margin-left: 1rem;
    input[type='checkbox'] {
      height: 0;
      width: 0;
      visibility: hidden;
    }
  
    label {
      position: relative;
      cursor: pointer;
      width: rem(54);
      height: rem(28);
      background: $border-grey;
      display: block;
      border-radius: rem(200);
    }
  
    label:after {
      content: '';
      position: absolute;
      top: rem(2);
      left: rem(2);
      width: rem(24);
      height: rem(24);
      background: $bg-light;
      border-radius: rem(200);
      transition: 0.3s;
    }
  
    input:checked + label {
      background: $primary;
    }
  
    input:checked + label:after {
      left: calc(100% - 2px);
      transform: translateX(-100%);
    }
  
    label:active:after {
      width: rem(35);
    }
  }
  </code></pre>