更改输入时的蓝色外发光（复选框）（引导程序 4）答案

【问题标题】：Change the blue outglow on input (checkboxes) (bootstrap 4)更改输入时的蓝色外发光（复选框）（引导程序 4）
【发布时间】：2017-02-19 18:05:34
【问题描述】：

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

<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;
}

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

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

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

【问题讨论】：

标签： html css focus bootstrap-4

【解决方案1】：

试试 outline-color 属性

input, input:focus {

    outline-color: red;

}

【讨论】：

【解决方案2】：

将 .btn-custom 类添加到您的按钮
根据需要更改边框颜色
根据颜色改变rgba值

.btn-custom:focus, .btn-custom:active {
  border-color: #1E824C;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(44, 186, 110),0 0 8px rgba(44, 186, 110);
  box-shadow: inset 0 1px 1px rgba(44, 186, 110),0 0 8px rgba(44, 186, 110);
}

【讨论】：