When clicking a primary bootstrap button, it changes its background color to blue on mobile devices.
For example, the first button appears normal and the second one turns blue after clicking. However, this background effect disappears when clicking anywhere else on the website.
Is there a way to prevent this background change from happening using a command in JavaScript or CSS when clicking a button?
Below is the HTML code for my button:
<div class="col-md-4 col-xl-3 text-center optionsButtonsDiv displayNone">
<div class="card bg-light border">
<button onclick="return tryToAnswer(this.id, 0)" runat="server" class="btn btn-outline-primary py-2 py-md-3 optionsButtons">בדיקה</button>
</div>
</div>
I have attempted to solve this issue with the following CSS code, which worked for desktop view but not for mobile:
.optionsButtons:focus, .optionsButtons:active {
outline: none !important;
box-shadow: none;
}
I also tried using JavaScript, but had the same result as the previous attempt:
window.document.activeElement.blur();
Any suggestions are appreciated. Thank you.