Internet Explorer 8 non supporta le immagini di sfondo applicate all'elemento label
. Si tratta di una grave limitazione che fortunatamente possiamo aggirare con jQuery. Vediamo come.
Comunemente si sfrutta l'attributo for
dell'elemento label
per assegnare stili CSS specifici in base al campo di riferimento:
label {
display: block;
padding-left: 1.6em;
margin-bottom: 0.4em;
background-repeat: no-repeat;
background-position: 0 50%;
}
label[for="name"] {
background-image: url(user.png);
}
label[for="email"] {
background-image: url(email.png);
}
label[for="comment"] {
background-image: url(comment.png);
}
Con jQuery dobbiamo semplicemente racchiudere l'elemento label
con un elemento span
e assegnare a quest'ultimo una classe CSS specifica che andrà ad utilizzare quegli stili definiti tramite i selettori di attributo:
$('label', '#contact-form').each(function() {
var $label = $(this);
var $for = $label.attr('for');
var $span = '<span class="';
switch($for) {
case 'name':
$span += 'name"';
break;
case 'email':
$span += 'email"';
break;
case 'comment':
$span += 'comment"';
break;
default:
$span += '"';
break;
}
$span += '></span>';
$label.wrap($span);
});