Colour change on button press/image on touch panel

[David08]

Hello,

I have made an application in WebIq, with different UI Actions that when I press the button/container/image, in Windows version (with mouse) it doesn't change its appearance, but in touch panel it colours the button/image with a blue rectangle. Attached picture.

I have configured the widgets with CSS Stylesheets.
I know that to change the appearance when the mouse hovers over the widget is with the "hover" property.

I would like to know with which property I can change the colour of the widget on the touch panel while it is clicked. It happens also with other widgets:

Thanks.

[webiq-sk]

The cause of the issue is described here:
https://itnext.io/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c

A possible workaround using CSS can be found here:
https://css-tricks.com/solving-sticky-hover-states-with-media-hover-hover/

WebIQ 2.16, which will be released later this year, will use this method instead for its revamped IQ widgets with a corresponding fallback to support older devices:
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible

[danielsimila · Accepted solution]

FWIW I had some similar visual issues going from mouse -> touch panel, and if I remember correctly, adding the following snippet to a global .css stylesheet fixed the issue I had. 

body {
    -webkit-tap-highlight-color: unset;
}

 You could try it out on your system and see if this is what you want. 

[webiq-sk · Accepted solution]

Please note that using --webkit-tap-highlight-color is not a standard attribute and will not work on all devices:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color?retiredLocale=de