Don't show highlight rectangle on button press

[waffle]

Not really a feature...
On mobile touch devices an ugly blue rectagle appears around every button you press.
Hiding it would make the web ui feel more like an app.

[Tim Curtis]

No issue on my end using IOS/Safari. Maybe it's the particular Browser that you are using.

[gbh_uk]

Try adding the following CSS rules in moode.css immediately after the first body rule:

button, textarea, input, select, a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
:focus {
outline: none !important;
}

This stopped the blue rectangle appearing for me in Chrome for Android.

[swizzle]

Try adding the following CSS rules in moode.css immediately after the first body rule:

button, textarea, input, select, a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
 user-select: none;
}
:focus {
   outline: none !important;
}

This stopped the blue rectangle appearing for me in Chrome for Android.

Since nearly everything is either WebKit or Blink now you really only need:

.btn {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.btn:active {color:var(--textvariant);} /* this needs to be a separate rule */

You probably don’t need to worry about anything but buttons but either way use .btn because sometimes people used that class on non-button tags. The :focus was already handled in primordial bootstrap css, the :active shows the press as doing something but at least on iOS you need to do a bit more work to get that to work.

[Tim Curtis]

I'll add to panels :-)

Code:

.btn {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-select: none;
-webkit-touch-callout: none;
}

.btn:active {color:var(--textvariant);} /* this needs to be a separate rule */