En una página html que estoy haciendo, traté de hacer clic en div usando html y css. Esto ha funcionado perfectamente en algunos de los principales navegadores en los que lo he probado (Chrome, Firefox, Opera, Safari), así como en un teléfono HTC, pero cuando intenté probarlo en Iphone noté que simplemente no funcionaba. Las casillas de verificación ni siquiera eran seleccionables.

Este es mi código (trabajando aparte de en Iphone):

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%;
}

omo puedes ver, la técnica que estoy usando es básicamente tener un<label> extendido por todo el padrediv así que en cualquier lugar donde haga clic, marcará / desmarcará la casilla de verificación vinculada.

Desafortunadamente, esto no funciona en iPhone. ¿Sería posible de alguna manera seguir usando esta técnica pero también proporcionar soporte para iPhone? (Preferiblemente sin javascript, porque realmente estoy haciendo todo lo posible para usar solo HTML y CSS)

Gracias por adelantado

Arne