In questo articolo vediamo come aggiungere un immagine di fondo che sostituisca il classico aspetto di una checkbox.
vediamo sotto un esempio di come di presenta una checkbox classica
seleziona BICICLETTA
seleziona MACCHINA
seleziona BARCA
ed il relativo codice in formato html
<input name="vehicle1" type="checkbox" value="Bike" >; seleziona BICICLETTA <input name="vehicle2" type="checkbox" value="Car" >; seleziona MACCHINA <input checked="checked" name="vehicle3" type="checkbox" value="Boat" >; seleziona BARCA
Ora abbiamo bisogno di creare o scaricare dal web un’immagine che sostituisca l’aspetto del box con il flag
Noi abbiamo creato da zero questa semplice grafica con risoluzione 32×32 pixel che useremo per i nostri scopi
In seguito abbiamo aggiunto qualche riga
input[type="checkbox"] {
position: absolute;
left: -9999px;
}
input[type="checkbox"] + label {
/* QUI INSERIAMO L'URL DELLA NOSTRA IMMAGINE E LA POSIZIONIAMO ALLE COORDINATE 0 0 */
background: url('updown2.png') no-repeat 0 0;
padding-left: 30px
}
input[type="checkbox"]:checked + label {
/* POSIZIONIAMO LO SFONDO PER LA CONDIZIONE CHECKED.
L'IMMAGINE E' ALTA 32px QUINDI CI SERVE SPOSTARLA VERSO L'ALTO '-16'
PER VEDERE LA PARTE VERDE*/
background-position: 0 -16px;
}
.clickable{
cursor: pointer;
}
.myButton {
background-color:#EEE;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
border:1px solid #CCC;
display:inline-block;
color:#000;
font-family: Fira Sans Condensed, Verdana, Geneva, sans-serif;
font-size:12px;
padding:4px 5px;
text-decoration:none;
}
.myButton:hover {
background-color:#EFE;
}
.myButton:active {
position:relative;
top:0px;
}
</style>
per finire inseriamo il codice che mostrerà la checkbox modificata
<div class="myButton" title="Premi il pulsante aggiorna per confermare"> <input type="checkbox" id="checkbox-id" class="clickable" /> <label for="checkbox-id">Ordinamento</label> </div>
Vedi la demo