Casillas de verificación y botones de opción personalizados | Programar Plus

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);
}