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

[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??