HTML <label> command doesn't work in Iphone browser

Ask a question

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:


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


.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

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)

offer bounty
add comment

0 Answer

Your Answer