CrazyZone

..:: Aiuto con il computer e non solo... ° The Help Center ::..
=> Siti Web - WebMaster Section => Topic aperto da: Nike - Maggio 19, 2014, 22:12:39 pm

Titolo: CSS help...input[type"checkbox"] style
Inserito da: Nike - Maggio 19, 2014, 22:12:39 pm
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...
(http://s27.postimg.org/tpfq3dvdb/sprite.png)

grazie mille anticipatamente...
Titolo: Re:CSS help...input[type"checkbox"] style
Inserito da: 900931 - Maggio 22, 2014, 12:05:39 pm
Puoi inserire anche il codice html che lo richiama?
Titolo: Re:CSS help...input[type"checkbox"] style
Inserito da: Nike - Maggio 22, 2014, 12:35:31 pm
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...
Titolo: Re:CSS help...input[type"checkbox"] style
Inserito da: Nike - Maggio 26, 2014, 02:12:35 am
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:

(http://s9.postimg.org/825sxesnj/checkbox.png)

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

suggerimenti su FF?? :(