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

Try styling the wrapper div with select:none;

That should turn it off, and then you could code the highlight onfocus yourself.

Most browsers actually do this, but it's a bit more noticeable on the iPad and other Apple touch products. It's really for usability purposes, so I would only recommend disabling it if it is causing problems like the one you mentioned. It serves to help the user know what they are clicking, and gives them a chance to move their finger away if they are on the wrong thing.

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.

Answer 3

Ok, check this out:

http://rickyrosario.com/blog/how-disable-tap-highlighting-on-your-iphone-ipad-iwhatever-web-app/

This trick doesn't exactly disable it, but it will become invisible. I have not tested this, however.