Search code examples
htmlwindows-phone

Click on image in label tag does not trigger on Windows Phone


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?


Solution

  • 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>