Los selectores aquí son específicos del marcado de Wufoo, pero los conceptos en funcionamiento pueden funcionar para cualquier forma. La idea general es que haga invisibles los botones de opción y las casillas de verificación predeterminados estableciendo su opacidad en cero y reemplácelos con gráficos. Luego use el selector: comprobado para alternar los gráficos entre sus versiones marcadas y no marcadas.
/*
Hide the original radios and checkboxes
(but still accessible)
:not(#foo) > is a rule filter to block browsers
that don't support that selector from
applying rules they shouldn't
*/
li:not(#foo) > fieldset > div > span > input[type="radio"],
li:not(#foo) > fieldset > div > span > input[type="checkbox"] {
/* Hide the input, but have it still be clickable */
opacity: 0;
float: left;
width: 18px;
}
li:not(#foo) > fieldset > div > span > input[type="radio"] + label,
li:not(#foo) > fieldset > div > span > input[type="checkbox"] + label {
margin: 0;
clear: none;
/* Left padding makes room for image */
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(off.png) left center no-repeat;
}
/*
Change from unchecked to checked graphic
*/
li:not(#foo) > fieldset > div > span > input[type="radio"]:checked + label {
background-image: url(radio.png);
}
li:not(#foo) > fieldset > div > span > input[type="checkbox"]:checked + label {
background-image: url(check.png);
}