How to Prevent a Button from Changing its Border Color and Background Color When Clicked in CSS

This code snippet is brought to you by the developer of MoneyPhone, a personal expenses tracking app for Android and iOS. Quit living paycheck to paycheck and get your personal finances under control when you start monitoring your spending with MoneyPhone!

Okay, so you want your HTML <button> tag to stop displaying a solid border and changing its background color when clicked (using CSS). Here’s the quick fix for iOS & Android =>

<!DOCTYPE html>
<html>
<head>
<style>
.noFlash {
/* Remove onclick Background Color Change */
/* REFERENCE: https://bit.ly/2Yc95wR */
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.noFlash:focus {
/* Remove onclick Border Color Change */
/* REFERENCE: https://bit.ly/2KFgNG7 */
outline: none;
background-color: white!important;
}
</style>
</head>
<body>
<button class="noFlash">CLICK ME</button>
</body>
</html>
 

topherPedersen