0

anyone know how to add an active state to the labeled radio-button?



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>


Which CSS-styling can I use to make the selected radio's label have an "active"/"selected" state as you have in menus etc?

LIKE THIS: http://i.cubeupload.com/xURJ8M.jpg

user3228988
  • 1
  • 1
  • 2
  • possible duplicate of [CSS - How to Style a Selected Radio Buttons Label?](http://stackoverflow.com/questions/4641752/css-how-to-style-a-selected-radio-buttons-label) – Gorgsenegger Jan 23 '14 at 19:52

3 Answers3

0

Instead of "checked" try:

<input type="radio" name="comment" value="XS" size="50" required checked="checked">
Jason M. Batchelor
  • 2,951
  • 16
  • 25
  • The thing is, i want to style the "label" as I have made the radio button to a "regular" button.. http://i.cubeupload.com/xURJ8M.jpg like that... – user3228988 Jan 23 '14 at 20:46
0

For css styles you can just use :checked pseudo class.

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

Check out this fiddle - http://jsfiddle.net/K2Kgf/

Tanel Eero
  • 642
  • 3
  • 8
0

HTML:

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

CSS:

input[type="radio"]:checked + label {
}
yennefer
  • 189
  • 6
  • 20