johanBleuzen

Le HTML5 a introduit de nombreuses nouveautés pour les formulaires et il est vraiment très simple d'améliorer les différents formulaires de son site. Cependant, il y a certain champs de formulaire qui pose problème au niveau design pour Safari, c'est celui de type "search". Voyons voir comment supprimer la sur-couche graphique que Safari rajoute sur cet input qui peut "casser" des designs sur le butineur d'Apple...

Ce problème ne touche que Safari Mac (Safari Windows est épargné), mais ce genre de détail peut pèser sur un design. En effet, les inputs de type "search" ne sont pas faciles à styliser sur ce navigateur, essayer donc de changer la taille du champ ou la taille de la police pour voir... Sur la capture suivante, le champ de gauche représente un champ de type "search" dans Safari et à droite un champ dans un autre navigateur.

Généralement les sites HTML5 conservent un input de type "text" classique pour leur formulaire de recherche (mais je n'ai pas réussi à trouver un exemple de ce que j'avance).

Pourtant il est très facile de supprimer les éléments graphiques inutiles avec une simple ligne de CSS, il suffit d'insérer dans votre feuille de style le snippet suivant :

input[type="search"] {
	-webkit-appearance: none;
}

Ce snippet n'a absolument aucun impact sur les autres navigateurs et sur le fonctionnel du champ, la petite croix pour remettre le champ à zéro est toujours visible et fonctionne encore. En revanche vous obtiendrez un champ que l'on pourra facilement changer pour s'intégrer dans le design. Je vais devoir mettre mon formulaire de recherche à jour...