标记单选按钮上的“活动”状态？

Question

任何人都知道如何将活动状态添加到带标签的单选按钮？

HTML：

<label class="blacksize" for="XS">
            <input type="radio" name="comment" value="XS" size="50" required checked>XS<br>
        </label>
        <label class="blacksize">
            <input type="radio" name="comment" value="Small" size="50" required>S<br>
        </label>
        <label class="blacksize">
            <input type="radio" name="comment" value="Medium" size="50" required>M<br>
        </label>
        <label class="blacksize">
            <input type="radio" name="comment" value="Large" size="50" required>L<br>
        </label>
        <label class="blacksize">
            <input type="radio" name="comment" value="XL" size="50" required>XL<br>
        </label>
        <label class="blacksize">
            <input type="radio" name="comment" value="XXL" size="50" required>XXL<br>
        </label>

我可以使用哪种 CSS 样式来使选定收音机的标签具有“活动”/“选定”状态，就像您在菜单等中一样？

喜欢这个：http://i.cubeupload.com/xURJ8M.jpg

Answer 1

而不是“检查”尝试：

<input type="radio" name="comment" value="XS" size="50" required checked="checked">

Answer 2

对于 css 样式，您可以使用 :checked 伪类。

input[type=radio]:checked {
    box-shadow:red 0px 0px 0px 5px;
}

看看这个小提琴 - http://jsfiddle.net/K2Kgf/

Answer 3

HTML：

<input type="radio"/>
<label></label>

CSS：

input[type="radio"]:checked + label {
}