I have to use an image instead of text as a label for a radio element. It works fine on all devices except for Windows Phone. The simplified code can be found in this example:
<form action="#" method="post">
<label>
<input type="radio" name="foo" value="0" />
<img src="http://placehold.it/50x50"><br />
text0
</label>
</form>
It makes no difference if the input field is inside the label or referenced with for. I tried to use jQuery and trigger('input') too. But no chance to bring Windows Phone to check the radio element except for click on the element itself or a text label. How can I use an image as a label which works on Windows Phone too?
I added a "click"-Element positioned above all other elements inside the label (pseudocode):
<form action="#" method="post">
<label style="position:relative;">
<input type="radio" name="foo" value="0" />
<img src="http://placehold.it/50x50"><br />
text0
<span style="position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;"></span>
</label>
</form>