Change the blue humus in the input (flags) (bootstrap 4)

Question

I know that this question has been asked many times, and I can guarantee that I have tried most of the solutions! My code is as follows:

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

This code is inside the Bootstrap 4 modal, now when I click the button, it has a blue glow that I would like to change to a different color, say red. What I have tried so far:

How to change the focus glow of a text field in Bootstrap 3?

How to change 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 texturing / texture setting in Safari / Chrome

And so on and so forth, I pretty much tried all the solutions that I found here on StackOverflow, but unfortunately that 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 constant red border around all the elements, so yes, and now I have no ideas and hope someone can help me.

Note. I am not trying to change bootstrap css itself, simply because I do not want every focus on my site to change color, only these specific buttons.

Hope I provided every information you need, I am still an intern and started writing just 1 month ago, so please be gentle :) Thanks in advance!

Answer 1

input, input:focus {

    outline-color: red;

}

Answer 2

.btn-custom class
, 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);
}