Question

因此，我正在使用引导程序，并且试图在单击自定义开关按钮周围的蓝色轮廓时将其删除，但是我无法删除它，而是使用了chrome。这是我的代码：

#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>

Answer 1

您必须在以下CSS选择器上将其删除：

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

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

此外，如果要在集中使用时从开关上移除浅蓝色边框：

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

自定义开关输入的蓝色轮廓不想消失

1 个答案: