CLIENT: Second Nature
CLIENT: Ungureanu Imobiliare
CLIENT: Agriferma
CLIENT: Bere Bauturi Bucuresti
CLIENT: Fatal Beauty Studio
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
Scrie un comentariu
Adaug acest articol la bune de folosit acum.