Weird <label> tag issue

Highlighted
New Member
3 0 0

Hi guys, I have this code:

                <label class="radio-option correct" for="option-1">
                      <input id="option-1" type="radio" name="animal" class="radio-btn" />
                      <div class="radio-img-wrap">
                          <span class="helper"></span>
                          <img class='radio-img' src="http://media.sube.com/images/tiger.png">;
                      </div>
                 </label>

I paste it in using the source mode, but then when I save the page, it turns it into this:

<label class="radio-option correct" for="option-1"><label class="radio-option correct" for="option-1"> <input id="option-1" type="radio" name="animal" class="radio-btn" /></label></label>
<div class="radio-img-wrap"><span class="helper"></span> <img class="radio-img" src="http://media.sube.com/images/tiger.png"; /></div>

Any pointers?

 

0 Likes
Shopify Expert
9349 0 1229

Adding block elements inside a label is likely unsupported under the current html5 spec, which is why you're seeing weirdness. Try someting more like:

<label class="radio-option correct" for="option-1">Some label or descriptor </label>
<input id="option-1" type="radio" name="animal" class="radio-btn" />
<div class="radio-img-wrap">
    <span class="helper"></span>
   <img class="radio-img" src="http://media.sube.com/images/tiger.png">;
 </div>

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
3 0 0

My code seems to pass the validation tests...

And placing it in the latter format means I have to use jQuery to do some magic instead of just using CSS...

0 Likes
Shopify Expert
9349 0 1229

My code seems to pass the validation tests...

It shouldn't. Under the current spec the label should be just that - a label. it should serve no interactive purpose and thus contain none of those elements you've added. By ignoring this you may find that some browsers will ignore the input or click actions on the items within.

And placing it in the latter format means I have to use jQuery to do some magic instead of just using CSS...

So wrap the whole thing in an element that you can target.

Did you try what I suggested in the previous post - did it work or also get changed after saving?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
New Member
3 0 0

No, I'm still rewriting my CSS to be able to try the latter option.

Thanks for your help, will let you know how it went!

0 Likes