HTML, CSS : Beautiful radio and checkboxes

Radio:

There are two ways you can put label on radios

• Put for="id_of_your_radio" in the label tag
• Put the radio inside of lable tag; no need of for attribute. It will be implicit

  • <label>
     <input id="sex-other" type="radio" name="sex" value="others" /> Other
    </label>

  • This technique is more cleaner, intuitive and maintainable from my perspective.

Our Target:

The basic idea is: we want to modify the label according to our design demands. But the later technique explained above has label as parent to input tag; CSS has limitation; we cannot select parent on the basis of child. In our case child (input) changes events and need to modify the label.

So going with the former technique

 

See here for More details