When you touch an HTML element in Safari on the iPad, it turns gray. What is the logic to decide which element among nested elements is shown in gray?

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.

Answer 2

I have discovered something about the "logic" behind the graying behavior. It seems that elements that have handlers such as onclick, onmousedown etc. exhibit the behavior and those without such handlers don't. A (somewhat tedious) workaround for us is to change the code of the autocomplete so that each row has its own onmousedown etc. handler rather than the wrapping div taking care of this.