+- Moode Forum (https://moodeaudio.org/forum)
+-- Forum: moOde audio player (https://moodeaudio.org/forum/forumdisplay.php?fid=3)
+--- Forum: Feature requests (https://moodeaudio.org/forum/forumdisplay.php?fid=8)
+--- Thread: Don't show highlight rectangle on button press (/showthread.php?tid=2000)
Don't show highlight rectangle on button press - waffle - 12-20-2019
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.
RE: Don't show highlight rectangle on button press - Tim Curtis - 01-18-2020
No issue on my end using IOS/Safari. Maybe it's the particular Browser that you are using.
RE: Don't show highlight rectangle on button press - gbh_uk - 01-18-2020
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.
RE: Don't show highlight rectangle on button press - swizzle - 01-18-2020
(01-18-2020, 04:59 PM)gbh_uk Wrote: 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.
RE: Don't show highlight rectangle on button press - Tim Curtis - 01-19-2020
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 */