Em uma página html que estou criando, tentei tornar o div clicável usando html e css. Isso funcionou perfeitamente em alguns dos principais navegadores em que o testei (Chrome, Firefox, Opera, Safari), bem como em um telefone HTC, mas quando tentei testá-lo no Iphone, notei que simplesmente não funcionava. As próprias caixas de seleção nem eram selecionáveis.

Este é o meu código (trabalhando além do 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%;
}

Como você pode ver, a técnica que estou usando é basicamente ter um<label> espalhados por todo o paidiv em qualquer lugar que você clicar, marcará / desmarcará a caixa de seleção vinculad

Infelizmente, isso não funciona no iPhone. Seria possível, de alguma forma, continuar usando essa técnica, mas também fornecer suporte ao iPhone? (De preferência, sem javascript, porque estou realmente me esforçando para usar apenas HTML e CSS)

Desde já, obrigado

Arne