更改输入框（复选框）的蓝色轮廓（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的模态框中，当我点击按钮时，它会出现蓝色边框发光，我想将其更改为另一种颜色，比如红色。我尝试过以下方法：如何更改Bootstrap 3中textarea的焦点边框？、如何在Twitter Bootstrap中更改输入和textarea元素的边框/轮廓颜色？、如何更改Bootstrap默认输入聚焦发光样式？、去除Safari/Chrome文本输入/文本区域发光等等。我几乎尝试了在StackOverflow上找到的每一个解决方案，但可悲的是它们都没有起作用。唯一“接近”我想要的东西的是这段代码：

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

但这段代码存在一个问题，它会在所有元素周围创建一个永久的红色边框，所以我现在想不出其他办法了，希望有人能帮忙。

注意：我没有尝试更改Bootstrap CSS本身，仅仅是因为我不想让我的网站上每个焦点都改变颜色，只想针对特定按钮进行更改。

希望我提供的信息足够了，我还是一名实习生，刚开始编码才一个月，所以请大家温柔些 :) 预先感谢！

- NakedPython

Answer 1

将.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);
}

- Nath

Answer 2

尝试使用outline-color属性。

input, input:focus {

    outline-color: red;

}

- Atal Kishore