更改输入的蓝色输出(复选框)(引导程序4) [英] Change the blue outglow on input (checkboxes) (bootstrap 4)

问题描述

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

I know this question was asked a lot of times and I can guarantee you I tried most of the solutions! My Code is as followed:

<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的模块内部，现在，当我单击按钮时，它具有要更改为另一种颜色的蓝色轮廓发光，比如说红色.到目前为止，我尝试过的事情:

This code is inside a Modal of Bootstrap 4, now when I click the button it has this blue outline glow that I'd like to change to another color, lets say red. What I tried so far:

如何在Bootstrap中更改文本区域的焦点发光3?

如何在Twitter Bootstrap中更改输入和textarea元素的边框/轮廓线颜色?

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

删除Safari/Chrome文本输入/textarea发光

依此类推，我几乎尝试了在StackOverflow上找到的每个解决方案，但遗憾的是它没有用.唯一与我想要的接近"的是此代码:

And so on and so on, I pretty much tried every solution that I found here on StackOverflow, but sadly it didn't work. The only thing that was "close" to what I wanted was this code:

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

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

But the problem with this code is that it creates a permanent red border around all the elements, so yeah and now I'm out of ideas and hope someone can help me.

注意:我没有尝试更改自举css本身，仅仅是因为我不想让我的网站上的每个焦点都改变颜色，而只希望更改此特定按钮.

Note: I didn't try to change the bootstrap css itself, simply because I don't want every focus on my site to change the color, only this specific buttons.

我希望我能提供您需要的所有信息，我仍然是一名培训生，并且仅在1个月前才开始编写代码，所以请保持谦虚:)预先感谢！

I hope I provided every Info you guys need, I'm still a trainee and started to code just 1 month ago, so please be gentle :) Thanks in advance!

推荐答案

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

Add .btn-custom class to your button
Change the border color as you wish
Change the rgba value according to the color

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

这篇关于更改输入的蓝色输出(复选框)(引导程序4)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！