CSS help...input[type"checkbox"] style

(1/1)

Nike:
Ciao a tutti!
Chiedo venia...ma proprio non ne esco fuori...
vorrei tanto sostituire i checkbox di default con qualcosa di pių personalizzato. Ho pensato di utilizzare questo codice e uno sprite:
    input[type='checkbox']{      
   background-image: url('../Immagini/sprite.png');
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
   margin: 0;
   padding: 0;
}
input[type='checkbox']:checked{   
   background-position: 0px;
}

input[type='checkbox']:disabled{
   background-position: -48px;
}
input[type='checkbox']:checked:disabled {
   background-position: -32px;
}
input[type='checkbox']:hover {
   background-position: -80px;
}
input[type='checkbox']:checked:hover {
   background-position: -64px;
}
 
ora...lasciando perdere il "background-position", che devo ancora sistemare con i px giusti, il tutto non va e non ho proprio idea di come farlo andare...
idee? suggerimenti?

allego anche lo sprite...non si sa mai...


grazie mille anticipatamente...

900931:
Puoi inserire anche il codice html che lo richiama?

Nike:
Yesss...Eccolo:

    <input id="ctl00_ctl00_contentApplicazione_bodyDetails_ckSupervisore" type="checkbox" name="ctl00$ctl00$contentApplicazione$bodyDetails$ckSupervisore" checked="checked" disabled="disabled"> 
    <input id="ctl00_ctl00_contentApplicazione_bodyDetails_ckSupervisore" type="checkbox" name="ctl00$ctl00$contentApplicazione$bodyDetails$ckSupervisore" checked="checked"> 

č una web-app id e name son generati lato server, come lo status checked e disabled...

Nike:
Faccio un update...e autorispondo al topic...

Smanetta che ti smanetta...son arrivato ad ottenere:
    input[type='checkbox'], input[type='radio']{     
   background-image: url('../Immagini/controls.png');
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
   margin: 0;
   padding: 0;
   -moz-appearance: none; /*a funsiuna nen*/
   -webkit-appearance: none;
   -ms-appearance: none; /*a funsiuna nen*/
   -o-appearance: none;
   appearance: none;
}
/*checked*/
input[type='radio']:checked { background-position: -48px 0 !important; }
input[type='checkbox']:checked { background-position: -16px 0; }
input[type='checkbox']:hover:checked,
input[type='checkbox']:focus:checked { background-position: -16px -16px; }
input[type='radio']:hover:checked,
input[type='radio']:focus:checked { background-position: -48px -16px; }
/*focus*/
input[type='checkbox']:hover,
input[type='checkbox']:focus { background-position: 0 -16px; }
input[type='radio']:hover,
input[type='radio']:focus { background-position: -32px -16px; }
/*active*/
input[type='checkbox']:active { background-position: 0 -48px; }
input[type='radio']:active { background-position: -32px -48px; }
input[type='checkbox']:active:checked { background-position: -16px -48px; }
input[type='radio']:active:checked { background-position: -48px -48px; }
/*disabled*/
input[type='checkbox']:disabled { background-position: 0 -32px; }
input[type='radio']:disabled { background-position: -32px -32px; }
input[type='checkbox']:disabled:checked { background-position: -16px -32px; }
input[type='radio']:disabled:checked{ background-position: -48px -32px; }
input[type='checkbox']:hover:disabled,
input[type='checkbox']:focus:disabled { background-position: 0 -32px; }
input[type='radio']:hover:disabled ,
input[type='radio']:focus:disabled { background-position: -32px -32px; }
input[type='checkbox']:hover:disabled:checked ,
input[type='checkbox']:focus:disabled:checked { background-position: -16px -32px; }
input[type='radio']:hover:disabled:checked,
input[type='radio']:focus:disabled:checked { background-position: -48px -32px; } 
il codice par funzionare...ma ci son problemi su FireFox, che mi infastidisce assai...non funzionasse, ok, ci metterei una pietra sopra...ma funziona e fa solo paciocco con il default:



IE non lo vede neppure di striscio, Opera, Chrome e Safari no problem...

suggerimenti su FF?? :(

Navigazione

[0] Indice dei post