jQuery: risolvere il problema delle immagini di sfondo sull'elemento label in Internet Explorer 8

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);

});