How to Remove the Blue Highlight of Button on Mobile

How to remove the blue highlight of button on mobile?

You can add:

-webkit-tap-highlight-color: transparent;

You can also add this to your stylesheets to define it globally:

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

Hope this helps :)

You can find the documentation here for more info: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html#//apple_ref/doc/uid/TP40006510-SW5

Blue highlight on onclick on buttons in chrome mobile?

It's -webkit-tap-highlight-color default behaviour.

*:focus {
    -webkit-tap-highlight-color: transparent;
    outline: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}

How to remove blue highlight when you hold on input buttons in css?

try with this :

.button_class:focus {
    outline: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

Remove blue border from css custom-styled button in Chrome

Doing this is not recommended as it regresses the accessibility of your site; for more info, see this post.

That said, if you insist, this CSS should work:

button:focus {outline:0;}

Check it out or JSFiddle: http://jsfiddle.net/u4pXu/

Or in this snippet:

button.launch {

background-color: #F9A300;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;

}

button.launch:hover {

cursor: pointer;

background-color: #FABD44;

}

button.launch {

background-color: #F9A300;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;

}

button.launch:hover {

cursor: pointer;

background-color: #FABD44;

}

button.change {

background-color: #F88F00;

border: none;

height: 40px;

padding: 5px 15px;

color: #ffffff;

font-size: 16px;

font-weight: 300;

margin-top: 10px;

margin-right: 10px;

}

button.change:hover {

cursor: pointer;

background-color: #F89900;

}

button:active {

outline: none;

border: none;

}

button:focus {outline:0;}

<button class="launch">Launch with these ads</button> 

<button class="change">Change</button>

How disable the blue boundary box when a touch occurs on chrome mobile?

You have to set -webkit-tap-highlight-color:transparent or -webkit-tap-highlight-color:rgba(0,0,0,0) to remove the default hightlight tap color on chrome.

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color

About bootstrap, the default css contains the property, as you can see here:

Tailwindcss. Blue rectangle when click on mobile device

* { -webkit-tap-highlight-color: rgba(0,0,0,0); }

It works well.

How to remove blue-box-fill when clicking the buttons?

The property you're looking for is tap-highlight-color

-webkit-tap-highlight-color: transparent;

---

Related Topics