Change the blue outglow on input (checkboxes) (bootstrap 4) – Twitter bootstrap

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>

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:

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

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.

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.

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!