Note that there are some explanatory texts on larger screens.

plurals
  1. POImage label for input in a form not clickable in IE11
    primarykey
    data
    text
    <h1>The problem</h1> <p>In IE11 the image in the following code is clickable to activate/toggle the input in the label:</p> <pre><code>&lt;label&gt; &lt;input type="checkbox"&gt; some text &lt;img src="http://placeimg.com/100/100/any" alt="some img"&gt; &lt;/label&gt; </code></pre> <p>While the image in the this exactly same code but inside of a <code>&lt;form&gt;</code> is not clickable to activate/toggle the input:</p> <pre><code>&lt;form&gt; &lt;label&gt; &lt;input type="checkbox"&gt; some text &lt;img src="http://placeimg.com/100/100/any" alt="some img"&gt; &lt;/label&gt; &lt;/form&gt; </code></pre> <p>(<a href="http://jsfiddle.net/GYNUS/">Demo at jsfiddle</a>)</p> <p><img src="https://i.imgur.com/FVpKLYb.gif" alt="Example"></p> <p><em>Note that in the example animation above I'm clicking the second image, which doesn't work, but clicking on the text works (just did that to demonstrate).</em></p> <p><strong>This was tested and reproduced on:</strong></p> <ul> <li>IE 11.0.9600.16428 on Windows 7 Pro SP1 x64.</li> <li>IE 11.0.9600.16438 on Windows RT 8.1 tablet.</li> <li>IE 11.0.9600.17105 on Windows 7 Pro SP1 x64.</li> <li>IE 11.0.10240.16431 on <em>Windows 10</em></li> </ul> <p>This issue does not occur in IE9, IE10, Microsoft <em>Edge</em>, and other browsers.</p> <h1>Questions:</h1> <ol> <li>Can this be solved <strong>without</strong> JS while still using image tags?</li> <li>If not, what other possible solutions are there?</li> <li><em>(Optional)</em> Why doesn't the image in the second example trigger the input element (while doing it in the first)?</li> </ol>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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