单击模式下的 Bootstrap 单选按钮轮廓

Question

我正在开发我的引导程序。

每当我点击一个单选按钮时，就会出现这样的蓝色轮廓：

我尝试通过 ff CSS 来解决这个问题：

.form-check-input:checked[type=radio], .form-check-input:checked[type=radio]:hover, .form-check-input:checked[type=radio]:focus, .form-check-input:checked[type=radio]:active{
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

但是这些仍然不起作用。我的 HTML 很简单：

<input class="form-check-input" name="gender" type="radio" value="male"> 
    <label class="form-check-label">Male </label> 

知道如何在点击或选择时完全删除这个烦人的蓝色轮廓吗？

Answer 1

.form-check-input:focus {
    box-shadow: none;
}

试试这个代码。希望它会起作用。因为当输入焦点时，就会出现box-shadow。