Cross-browser radio buttons and checkboxes using only CSS3
Spanish version / Versión en Español Each browser gives input elements the look and feel it desires, and it cannot be customized directly on every browser. For radio buttons and checkboxes, we can get around this issue by using only CSS3; no need to bring in extra dependencies. The trick is to use CSS to hide the native input element, and then add an empty span element as the first child of the input's label. Having a label associated to an input allows us to use the CSS3 + syntax to select those specific cases, and then we can select the child empty span to generate our custom look for the input element. So, if we wanted to customize our radio buttons, first, in HTML, we need to add the dummy span and use labels. For example: <!doctype html> <html> <div> <input type="radio" id="radio01" name="radio" /> <label for="radio01"><span></span>Radio Button 1</label> </div> <