è possibile mettere l'immagine in input type = "check box"?

Voglio mettere un'immagine sullo sfondo della casella di controllo & radio nel mio codice html ma non funziona ma funziona su altre proprietà del modulo.è possibile mettere l'immagine in input type = "check box"?

fonte

2011-01-25 sandeep

Penso che non sia possibile, puoi provare qualche javascript + css per quello. Esempio: http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements – KishoreK

Sarebbe molto più semplice aiutarti se fornissi a almeno parte del codice relativo a dove stai avendo un problema. –

Puoi provare se riesci a costruire qualcosa da 'input [tipo = casella di controllo]: dopo' e' inserisci [tipo = casella di controllo]: controllato: dopo', ma probabilmente è CSS3 e non ho una scheda completa per quello, scusa. –

ho trovato il modo di come dare un'immagine per casella & Radio pulsante con puro css.

HTML

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label>

CSS

input[type=checkbox] { 
    display:none; 
} 

input[type=checkbox] + label { 
    background: #999; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

input[type=checkbox]:checked + label { 
    background: #0080FF; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
}

Controllare questo per più http://css-tricks.com/the-checkbox-hack/,

https://gist.github.com/592332

fonte

2012-04-13 05:53:02 sandeep

Posizionare la casella di controllo in un div e posizionare un'immagine di sfondo in detto div. Ecco un esempio:

<div id="backgrounddiv" style="background-image: url('image.gif');"> 
<input id="check_box" type="checkbox" /> 
</div>

fonte

2011-01-25 05:42:57 Fibericon

Non ho provato questo, ma dall'aspetto posso vedere che questo non funzionerà per i nostri scopi :), la soluzione di sandeep è la migliore :) (ancora) –

Scrivo il mio codice per risolvere questo problema. Funzionerà così. Non avevo questo codice ora ma scrivo allo stesso modo qui su SO.

<div class="checkbox-wrapper"> 
<input type="checkbox" name="value"/> 
<img src="img/blah.png"/> 
</div>

in CSS saremo nascondere questa casella di controllo per rendere è Z-index meno poi l'immagine che ho messo dentro questo codice wrapper. Eventwise quando qualcuno fa clic su un'immagine è simile a checkbox e verrà selezionata la casella di controllo reale. invece di display:none utilizzando opacity: 0 sarà meglio. Questo si romperà in IE6, ma non ci importava di questo perché non sto più supportando IE6.

In Javascript È possibile scrivere un evento se si desidera un'implementazione diversa (ma simile alla mia). È possibile sostituire la casella di controllo nativa Html, Radio e selezionare (selezionare2 è meglio se si configura con il bootstrap di Twitter) con i propri controlli basati su temi.

fonte

2014-02-28 05:30:41 Adrian

è possibile mettere l'immagine in input type = "check box"?

risposta

Problemi correlati