html – 更改输入上的蓝色渐变(复选框)(bootstrap 4)

2023年5月25日 267次阅读

我知道很多次问过这个问题,我可以向你保证我尝试了大部分解决方案！我的守则如下：

<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上找到的每个解决方案,但遗憾的是它没有用.唯一与我想要的“接近”的是这段代码：

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

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

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

我希望我提供了你们需要的每一个信息,我仍然是一名受训者,并在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);
}
点赞