39

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), as well as an HTC phone, but when I tried to test it on Iphone I noticed it just didn't work. The checkboxes themselves weren't even selectable.

This is my (working apart from on Iphone) code:

HTML:

<div class="" style="height: 30px;">
        <div style="display: table; width: 100%;">
        <div style="display: table-row; width: 100%;">
        <div style="display: table-cell;">
        <label for="3171">Text....</label>
        </div>

        <div style="display: table-cell; text-align: right;">
        <input type="checkbox" id="3171" name="3171">
        </div>
        </div>
        </div>
        <label for="3171">
        <span class="blocklink">Invisible text</span>
        </label>
        </div>

CSS:

.blocklink {
    display: block;
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    text-indent: -999em;
    top: 0;
    width: 100%;
}

So as you can see the technique I'm using is basicly just having a <label> spread all over the parent div so anywhere you click, it will tick/untick the linked checkbox.

Unfortunately, this doesn't work on IPhone. Would it be possible to somehow keep using this technique but also provide IPhone support? (Preferrably without javascript, because I'm really going out of my way to only use HTML & CSS)

Thanks in advance,

Arne

2
  • I don't have an iphone but I'm curious as to whether labels work at all (ie without all the css you are applying to them) or whether label is just unsupported for some reason.
    – Chris
    Commented Mar 24, 2011 at 15:40
  • Well, after some light googling I stumbled upon this article: electrictoolbox.com/html-label-toggle-select-fields which states "The traditional use works in all traditional browsers, but not on iPad or iPhone versions 3 or 4 (maybe it will in later versions)." So I haven't tested it myself, but I assume from that source they just don't work at all (without any css)
    – arnehehe
    Commented Mar 24, 2011 at 15:51

8 Answers 8

63

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>
3
  • 7
    +1 That just saved my day. Didn't know that the iOS browser can be that bitchy.
    – flu
    Commented Dec 9, 2011 at 10:11
  • 8
    I see that this answer is for iOS4 but I'm seeing the same behavior on iOS7 and this fix doesn't work. Is there any other workaround? Commented Feb 10, 2014 at 17:00
  • This is still required (and still works) as of March 2015 (IOS 7 on iPad 2)
    – den232
    Commented Mar 23, 2015 at 13:05
20

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;
}
8
  • 2
    It's March 2016 and I encountered this error in labels for IOS. This trick nailed it! Thanks man!!
    – novice
    Commented Mar 17, 2016 at 3:36
  • 1
    It's April 2016 and I encountered this error in labels for IOS. This trick nailed it! Thanks man!!
    – user239314
    Commented Apr 21, 2016 at 22:15
  • 2
    It's May 2016 and I encountered this error in labels for IOS AND FIREFOX MOBILE. This trick nailed it! Thanks man!! Commented May 9, 2016 at 4:39
  • 1
    It's September 2016 and I encountered this error in labels for IOS. This trick nailed it! Thanks man!!
    – IVN
    Commented Sep 1, 2016 at 15:10
  • 1
    It's November 2016 and this still persists in iOS 10. This trick nailed it!
    – bzin
    Commented Nov 15, 2016 at 10:02
11

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>
3
  • 3
    Nice, looks like an even better workaround using a single onclick attribute instead of one on each label element.
    – thasmo
    Commented Sep 6, 2012 at 15:32
  • it works even adding any container, like div, outside the form, with the onCLick="" attribute. weird, but useful!
    – bluantinoo
    Commented Sep 14, 2012 at 17:53
  • 1
    Indeed it also works on a parent container such a div, although it does not work if the onclick handler is added to the body.
    – Grodriguez
    Commented Jul 16, 2013 at 7:21
6

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

label { cursor: pointer; }

Is going to work both on iPhone and iPad.

3
  • This fixed the problem for me on latest iOS (as of 9/16/2011) for the iPod Touch.
    – Jon Adams
    Commented Sep 16, 2011 at 16:18
  • Apparently that fix doesn't work on iOS 4 (just tested it). Use Dan Manion's trick instead (adding an empty onclick="" event to the label), that did it for me.
    – flu
    Commented Dec 9, 2011 at 10:14
  • Works on iOS 6.2. Does anybody think that we should support older versions of iOS? Commented Mar 28, 2013 at 7:34
1

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.

1

I ran into a somewhat unique situation. We were already using pointer-events: none on all spans in labels. However, we then needed to add in a <a> as clickable within one of those labels.

<label>
    <span>Label text here. With a <a href="http://www.google.com">link text</a> here.</span>
</label>

So, we explicitly set pointer-events: all on those <a>.

label > span { pointer-events: none; }
label > span > a { pointer-events: all; }

This is working in latest Chrome, Firefox, IE 11, and iOS 9 Safari.

0

If you change DOM on event handler (example in onMouseEnter) this cause skip all next handlers include onClick.

SetTimeout don't fix this.

Example: 1. in onMouseEnter use setTimeout with function injected new div in DOM 2. any onClick handler don't called.

Solution: avoid change DOM in events handler.

Remark: it problem found for label tag, but still persist for span inside label. May be this problem present on any type tags.

This behavuor found only for mobile iOS. In desktop Safari and in Mac OS Safari - all ok.

0

I narrowed down my problem to use of the Fastclick library; when I removed it from my codebase my issues went away, which indicates to me there isn't a native iOS/FF problem as suggested by other answers here.

Without knowing the libraries other folks are using, but knowing that Fastclick is exceptionally common, can I suggest that the root cause of this bug is in fact a library issue - not one which has managed to persist through years of Apple releases! It seems more likely. Maybe the others here can shed some light on whether they are using Fastclick?

More info

Some browsers prevent file inputs from being triggered by client code as a security measure. Try triggering a click event from the console with document.querySelector('input[type=file]').click() and it'll work, do the same from your code and it will mysteriously fail.

I imagine the reason this bug exists is because an ontouchstart handler is being applied to the <label /> by Fastclick. When it is triggered on a touch device, the library will proxy that event to the onclick handler, or in this case the native <label /> functionality. Unfortunately, this means that client code is triggering the file input opening, and it's being blocked by the browser.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.