更改输入（复选框）上的蓝色发光（引导程序 4）

Question

我知道这个问题被问了很多次，我可以向你保证我尝试了大部分解决方案！我的代码如下：

<div class="btn-group" id="btn-container" data-toggle="buttons">
    <label class="btn classic-design">
        <input type="checkbox" checked autocomplete="off"> Player 1
    </label>
</div>

这段代码位于 Bootstrap 4 的模态中，现在当我单击按钮时，它具有蓝色轮廓发光，我想将其更改为另一种颜色，比如说红色。到目前为止我尝试过的：

如何更改 Bootstrap 3 中文本区域的焦点发光？

如何更改 Twitter Bootstrap 中输入和文本区域元素的边框/轮廓颜色？

http://www.tutorialrepublic.com/faq/how-to-change-bootstrap-default-input-focus-glow-style.php

删除 Safari/Chrome 文本输入/文本区域发光

等等，我几乎尝试了在 StackOverflow 上找到的所有解决方案，但遗憾的是它不起作用。唯一“接近”我想要的就是这段代码：

label, label:focus {
    outline: none !important;
    border:1px solid red !important;
    box-shadow: 0 0 10px #719ECE !important;
}

但这段代码的问题是它在所有元素周围创建了一个永久的红色边框，所以是的，现在我没有主意了，希望有人可以帮助我。

注意：我没有尝试更改 bootstrap css 本身，只是因为我不希望网站上的每个焦点都更改颜色，而只更改特定按钮的颜色。

我希望我提供了你们需要的所有信息，我仍然是一名实习生，1 个月前才开始编码，所以请温柔点:) 提前致谢！

Answer 1

尝试轮廓颜色属性

input, input:focus {

    outline-color: red;

}