CODEWITHSUNDEEP
htmlbootstrap-4
user11588249
user11588249

Reputation:

Blue outline of custom switch input doesn't want to disappear

So I'm using bootstrap and I'm trying to remove the blue outline around the custom switch button when I click on it, but I can't remove it, I'm using chrome. Here is my code:

#test:focus, 
#test:active,
input:focus,
input:active
      {
          outline: none !important;
      }
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet"    href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
   </head>
     <body>
   hello how are you doing
   <div class="custom-control custom-switch mx-auto shadow-none">
       <input type="checkbox" class="custom-control-input" id="customSwitches">
       <label id="test" class="custom-control-label" for="customSwitches"></label>
   </div>
  </body>
</html>

Upvotes: 1

Views: 770

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362780

You have to remove it on the following CSS selector:

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

https://www.codeply.com/go/eAUIJbpS2I

Additionally, if you want to remove the light blue border from the switch when focused use:

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
    border-color: #adb5bd;
}

Upvotes: 3

Related Questions