Making tappable HTML div for iPhone

Question

In my HTML code, I got a <div>. When the user taps anywhere inside that div, I'd like to alter various properties, like text size and background color. To me, this sounds a lot like creating two CSS styles for each state sounds like it should work, so I created the following CSS:

div.tappable {
   background-color: red;
   font-size: 10pt;
}

div.tappable:active {
   background-color: green;
   font-size: 12pt;
}

For some reason, the :active style is never used. Am I doing something wrong?

Answer 1

The :active selector is triggered for the duration in which the element is being pressed. However, on an iPhone, because of the nature of the touch screen, Mobile Safari doesn't use the :active selector.

To clarify, did you want to alter the properties while the user is pressing down on the div, or alter the properties after the user taps on the div?

Answer 2

i think this blog posting will be a good start to explaining how to track the events in moble safari and create the ui you are looking for

Touching and Gesturing on the iPhone