I want a button to change color while the user has clicked on the button and hasn't released it yet (on Mobile: while the user touches the button).
For changing the color I did:
input[type='button']:active{
background-color:#415575;
}
And for disabling text selection on Mobile (when the user touches and holds) I did:
@media only screen and (max-width: 600px) {
#test_btn {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
This solution works in Desktop. It also works in Mobile for Android Chrome, iOS Chrome, iOS Firefox, but not in Android Firefox (tested on 99.2.0). On Android Firefox the color doesn't change back to the original when the touch ends. In other words it seems the element stays in the "active" state even after the touch ends.
CodePudding user response:
Have you tried to set nonactive color
input[type='button']{
background-color:#f0f0f0;
}
Here you set normal state color
CodePudding user response:
If you are still having an issue here, I recommend solving it via JavaScript.
Mobile devices register active events slightly differently than Desktop such that they introduce touch events with access to the touch screen on them. You should be able to easily solve this by using the following:
element.ontouchstart((e) => {e.classList.add('class here')})
and
element.ontouchend((e) => {e.classList.remove('class here')})
Feel free to follow up if this doesn't work, I'll dig in a bit more in Firefox specific issues to come up with a better answer. Good luck!
Edit: Here is a reference doc: https://www.w3schools.com/jsref/obj_touchevent.asp