When clicking a primary bootstrap button, it changes its background color to blue on mobile devices.
https://i.sstatic.net/VNPDP.jpg
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.