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>

这段代码在一个Modal of 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上找到的每个解决方案，但遗憾的是它没有用。唯一的事情是＆＃34;关闭＆＃34;我想要的是这段代码：

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

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

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

我希望我提供了你们需要的每一个信息，我还是一名受训者，并且在1个月之前开始编码，所以请保持温和:)提前致谢！

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

Answer 2

尝试使用轮廓颜色属性

input, input:focus {

    outline-color: red;

}

更改输入上的蓝色渐变（复选框）（bootstrap 4）

2 个答案: