Butoane radio – checkbox
Dec 2011 03

Personalizarea butonului Radio – Checkbox. Vom pregati trei imagini diferite. Una pentru atunci când butonul de caseta sau radio, nu este în prezent selectat (off.png), o imagine checkbox pentru atunci când o caseta de selectare este marcata (check.png), si o imagine buton radio pentru atunci când un buton radio este marcat (radio.png) . Adaugati aceste imagini în acelasi folder.

CSS

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

Curios despre li:not(#foo) ? Asta este o tehnica numita “regula de filtrare” care ajuta ca proprietatile noastre sa se aplice numai în browsere, în cazul în care acestea pot sa lucreze.

1 Comentariu

  1. Rangler spune:

    Adaug acest articol la bune de folosit acum.

Scrie un comentariu