html checkbox con immagine di fondo



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

html checkbox con immagine di fondo

 

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

 

Rispondi

Rispondi

%d blogger hanno fatto clic su Mi Piace per questo: