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 */
    }

Codepen

This solution works on desktops. It also works in Mobile for Android Chrome, iOS Chrome, and 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