Workaround iPhone's browser not honoring the <label> element

Just ran into this recently and I thought it'd be helpful to share.

The HTML <label> element is supported in a weird way by iPhone's (v3) browser. Try this:

<input type="checkbox" id="chkTest" /><label for="chkTest">Click me!</label>

Tapping the "Click me!" label has no effect, the checkbox is not checked.

Lack of support in a touch device for <label> elements puzzled me and I tried to overcome this issue by using javascript. The surprise came when a I noticed a void javascript like the o开发者_运维知识库ne below also did the trick:

<input type="checkbox" id="chkTest" /><label for="chkTest" onclick="javascript:void(0);">Click me!</label>

HTH

Further info:

1. Also works with an empty handler: onclick=""
2. Disabling JavaScript inactivates again the label, even if using the empty handler.

After a bit of experimentation it looks like assigning the following CSS rule to is enough to trigger the expected label behaviour on the iPhone:

label {cursor: pointer}