Databases
StackOverflow2013
Postsdbo
POHTML <label> command doesn't work in Iphone browser
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML <label> command doesn't work in Iphone browser
    text
    copied!<p>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.</p> <p>This is my (working apart from on Iphone) code:</p> <p>HTML:</p> <pre><code>&lt;div class="" style="height: 30px;"&gt; &lt;div style="display: table; width: 100%;"&gt; &lt;div style="display: table-row; width: 100%;"&gt; &lt;div style="display: table-cell;"&gt; &lt;label for="3171"&gt;Text....&lt;/label&gt; &lt;/div&gt; &lt;div style="display: table-cell; text-align: right;"&gt; &lt;input type="checkbox" id="3171" name="3171"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;label for="3171"&gt; &lt;span class="blocklink"&gt;Invisible text&lt;/span&gt; &lt;/label&gt; &lt;/div&gt; </code></pre> <p>CSS: </p> <pre><code>.blocklink { display: block; height: 100%; left: 0; overflow: hidden; position: absolute; text-indent: -999em; top: 0; width: 100%; } </code></pre> <p>So as you can see the technique I'm using is basicly just having a <code>&lt;label&gt;</code> spread all over the parent <code>div</code> so anywhere you click, it will tick/untick the linked checkbox.</p> <p>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 &amp; CSS)</p> <p>Thanks in advance,</p> <p>Arne</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload