Immagini personalizzate per la casella di controllo?

Vorrei mostrare la casella di controllo come pulsante di attivazione. Ma non posso applicare le mie immagini personalizzate con CCS - viene comunque selezionata la casella di controllo. Come adempiere a questo compito?Immagini personalizzate per la casella di controllo?

mio CSS:

input[type=checkbox]#settingsbutton { 
    border-style: none; 
    background-color: transparent; 
    width: 42px; 
    height: 40px; 
    display: block; 
} 

input[type=checkbox].button-settings { 
    background-image: url("images/button-settings-normal.png"); 
} 

input[type=checkbox].button-settings:active { 
    background-image: url("images/button-settings-normal.png"); 
} 

input[type=checkbox].button-settings:hover { 
    background-image: url("images/button-settings-hover.png"); 
} 

input[type=checkbox].button-settings:active { 
    background-image: url("images/button-settings-pressed.png"); 
}

mio HTML:

<body> 

<input type="checkbox" id="settingsbutton" class="button-settings"/> 

</body>

fonte

2011-12-29 Dims

Se si desidera è di pura soluzione css poi si deve aggiungere label nel markup. E 'una scrittura trick & lke questo:

input[type=checkbox]{ 
    display:none; 
} 
input[type=checkbox] + label{ 
    height: 40px; 
     width: 42px; 
} 
body:not(#foo) input[type=checkbox]:checked + label{ 
    background-image: url("images/button-settings-normal.png"); 
} 

body:not(#foo) input[type=checkbox] + label{ 
    background-position:0 -46px; /* as per your requirement*/ 
    height: 40px; 
}

HTML

<body> 

<input type="checkbox" id="settingsbutton" class="button-settings"/> 
<label for="settingsbutton"></label> 

</body>

Leggere questi articoli:

http://www.thecssninja.com/css/custom-inputs-using-css

http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

Ma non è lavorare in IE8 & sotto

fonte

2011-12-29 11:58:55 sandeep

I collegamenti sono davvero utili, ma non capisco il motivo per cui è stato utilizzato 'visualizzazione: none' sulla casella di controllo? Se non è visualizzato, non puoi cliccarlo? Il tuo link suggerisce di impostare invece l'opacità a zero. – Mikaveli

Puoi cliccare sull'etichetta che attiverà la casella di controllo – Prodikl

Vedere questo link per lo styling check-box: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

La soluzione prevede che nasconde la casella di controllo e l'aggiunta di un elemento di stile al posto di esso, che emula il check- comportamento della scatola.

fonte

2011-12-29 12:01:59 techfoobar

Sì visto questo testo, ma mi chiedevo se è possibile usare solo CSS – Dims

Prova questa soluzione, se avete qualche testo in etichetta

input[type=checkbox]{ 
    display:none; 
} 
input[type=checkbox] + label:before{ 
    height: 42px; 
    width: 42px; 
    content: url("../img/chk.jpg"); 
} 
body input[type=checkbox]:checked + label:before{ 
    content: url("../img/chk_checked.jpg"); 
}

fonte

2016-10-27 10:22:47

Immagini personalizzate per la casella di controllo?

risposta

Problemi correlati