html - 更改输入时的蓝色发光(复选框)(bootstrap 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 的模式内，现在当我单击按钮时，它会发出蓝色轮廓光，我想将其更改为另一种颜色，比如说红色。到目前为止我尝试了什么:

How to change focus glow of textarea in Bootstrap 3?

How can I change the border/outline color for input and textarea elements in Twitter Bootstrap?

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

Remove Safari/Chrome textinput/textarea glow

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

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

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

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

我希望我提供了你们需要的所有信息，我还是一名实习生，1 个月前才开始编码，所以请多多包涵 :) 提前致谢!

Answer 1

试试 outline-color 属性

input, input:focus {

    outline-color: red;

}