Question

When you touch an element, such as an edit box, in a web page on the iPad, it turns gray while you are touching it.

I have a table wrapped by a floating div. Instead of an individual data element or row going gray, the whole table (or its wrapping div) goes gray when a data element is touched. (The function of this table is an autocomplete pop-up)

Elsewhere in the site, I have a table in which only the touched data element goes gray.

I wondered if anyone could direct me to an explanation of the logic behind this graying on touch, so that we can code our table to give the desired behavior. Ideally, we’d like the row to highlight when it is touched.

In the alternative, if we could turn off this graying behaviour, that would be another option. We could then code the highlighting ourselves. Is there a way to turn off this behavior for particular html elements?

Thanks.

Answer 1

This author suggests a solution to remove the highlighting:

If for whatever reason you don’t want some elements of your web site or application to be highlighted, simply add the following CSS rule to the corresponding elements.

-webkit-tap-highlight-color: rgba(0,0,0,0); 

It won’t disable the highlighting, but it will make it invisible (an opacity of zero).

I have not tested this, however.