HTML Command Doesn't Work In Iphone Browser

In a html page I am making, I tried to make div's clickable using html and css. This has worked perfectly in some major browsers I have tested it in (Chrome, Firefox, Opera, Safari

Solution 1:

Adding an empty onclick="" to the label makes the element clickable again on IOS4. It seems that by default the action is blocked or overtaken by the press and hold copy and paste text mechanics.

<label for="elementid" onclick="">Label</label>

Solution 2:

The problem seems to persists in iOS9 if any html elements are contained inside a label. At least happens with span elements inside it. 'pointer-events: none' fixes it.

<label for="target">
  <span>Some text</span>
</label>

The code above would not be trigger a change of the target input, when the user taps 'Some Text', unless you add the following css:

label span {
  pointer-events: none;
}

Solution 3:

I solved it by placing an empty onclick="" on a parent element:

<form onclick="">
    <input type="radio" name="option1" value="1">
    <label for="option1">Option 1</label>

    <input type="radio" name="option2" value="2">
    <label for="option2">Option 2</label>

    <input type="radio" name="option3" value="3" checked="checked">
    <label for="option3">Option 3</label>
</form>

Solution 4:

For some obscure reason, using CSS, if you apply:

label { cursor: pointer; }

Is going to work both on iPhone and iPad.

Solution 5:

Another solution — albeit more hacky, but bulletproof — would be to absolutely position the checkbox over the label, z-index it, increase the width/height to encompass the underlying label and then 0 the opacity. This, of course would be tedious if there are multiple labels on the page... You naturally would also only implement the absolute positioning for that media size; no need to hack the whole app environment.