Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The HTML5 draft spec specifically covers the SET A situation. <a href="http://dev.w3.org/html5/spec/forms.html#the-label-element" rel="nofollow">It says:</a></p> <blockquote> <p>If the for attribute is not specified, but the label element has a labelable form-associated element descendant, then the first such descendant in tree order is the label element's labeled control.</p> </blockquote> <p>Which means that</p> <pre><code>&lt;label&gt;Colour &lt;span&gt;&lt;input type='radio' name='colour' value='red' /&gt;Red&lt;/span&gt; &lt;span&gt;&lt;input type='radio' name='colour' value='white' /&gt;White&lt;/span&gt; &lt;span&gt;&lt;input type='radio' name='colour' value='blue' /&gt;Blue&lt;/span&gt; &lt;/label&gt; </code></pre> <p>is <em>semantically</em> equivalent to </p> <pre><code>&lt;label&gt;Colour &lt;span&gt;&lt;input id="control1" type='radio' name='colour' value='red' /&gt;Red&lt;/span&gt; &lt;/label&gt; &lt;span&gt; &lt;input id="control2" type='radio' name='colour' value='white' /&gt; &lt;label for="control1"&gt;White&lt;/label&gt; &lt;/span&gt; &lt;span&gt; &lt;input id="control3" type='radio' name='colour' value='blue' /&gt; &lt;label for="control1"&gt;Blue&lt;/label&gt; &lt;/span&gt; </code></pre> <p>which isn't what I think you intend.</p> <p>This also has practical consequences. If you put that markup on a web page, and then click the words "White" or "Blue", in some browsers it will result in the 'Red' radio button being selected.</p> <p>Ideally, Alex's solution would be used, but as you've found, styling <code>legend</code> is a PITA. There are some workarounds but nothing wholly satisfactory IMO.</p>
    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.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      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