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!
2
Answers
Try outline-color property
Add .btn-custom class to your button
Change the border color as you wish
Change the rgba value according to the color