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.

<labelfor="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.

<labelfor="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:

labelspan {
  pointer-events: none;
}

Solution 3:

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

<formonclick=""><inputtype="radio"name="option1"value="1"><labelfor="option1">Option 1</label><inputtype="radio"name="option2"value="2"><labelfor="option2">Option 2</label><inputtype="radio"name="option3"value="3"checked="checked"><labelfor="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.