Suite à mon dernier article : Placeholder (formulaires HTML5) et CSS. Que les attributs soient !, j’ai eu un commentaire de Raphael Goetter qui m’a dit que pour Internet Explorer on pouvait lui spécifier un background… Partant de là j’ai fait quelques tests.

Mise en place du placeholder sous IE

La solution est simpliste mais efficace, on peut utiliser placeholder avec Internet Explorer 9 et 8 (soit la majorité des IE) et à moitié avec IE7. La manipulation est simple : on fait une image pour l’input. Bien sûr ce n’est pas ce qui se fait de mieux.

input[placeholder]{
	background: #eee url(input.jpg);
	width: 200px;
	height: 30px;
	border: 0;
}
input[placeholder]:focus{background: #fff}

J’ai tenté le coup en jouant avec content, j’en ai déduis qu’il ne restait que le background. Par contre à la différence de Raphael chez moi seul le sélecteur générique a fonctionné (les CSS2 sont en théorie bien reconnus). Mais, je pense être dans une période ou mes Windows me rejettent (j’ai 2XP et un 7 sur la machine et aucun ne veut fonctionner sans problèmes…)

Comme vous le voyez on fonctionne avec du :focus, simple et fonctionnel. Sous IE7 le focus n’a pas fonctionné, hélas. Sous IE6 rien n’apparait ce qui n’est pas une surprise.
Voilà. Un pas de plus dans vos formulaires en HTML5