This query has been asked repeatedly, and I have exhaustively attempted numerous solutions. Here is my code snippet:
<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>
The above code resides within a Bootstrap 4 Modal. Upon clicking the button, it displays a blue outline glow that I wish to change to a different color, such as red. Among the methods I've tried include:
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?
Remove Safari/Chrome textinput/textarea glow
Despite trying various solutions from StackOverflow, none have yielded the desired outcome. The closest result was achieved with this code snippet:
label, label:focus {
outline: none !important;
border:1px solid red !important;
box-shadow: 0 0 10px #719ECE !important;
}
However, this code implemented a consistent red border around all elements, which is not ideal. I am now seeking assistance as I have exhausted my options.
Note: I refrained from altering the default Bootstrap CSS as I only intend to modify the color on specific buttons, not across the entire site.
I believe I have provided all necessary information. I'm relatively new to coding, having started just a month ago, so any guidance would be greatly appreciated. Thank you in advance!