Comment puis-je créer facilement un champ de texte de saisie effaçable avec une icône interne ?

Effacer les champs de texte de saisie avec une icône interne

La nécessité de créer un champ de texte de saisie avec une icône à droite qui efface le champ est un élément de conception courant. Lors de la recherche d'une solution, la plupart des résultats proposent uniquement de placer l'icône comme arrière-plan du champ de saisie. Cet article explorera une approche alternative pour obtenir la fonctionnalité souhaitée.

Utilisation du type « recherche »

Une méthode rapide et efficace pour créer un champ de texte de saisie effaçable est en attribuant le type "recherche" à l'élément d'entrée. Ce type est largement pris en charge par tous les navigateurs, mais il convient de noter que des problèmes de compatibilité peuvent survenir dans les versions d'Internet Explorer antérieures à 10.

Extrait de code :

<input type="search">

En définissant le type de saisie sur « recherche », une icône en forme de loupe apparaîtra sur le côté droit du champ. Cliquer sur cette icône effacera le contenu du champ. Cette approche simple fournit la fonctionnalité souhaitée sans avoir besoin de scripts ou de plugins supplémentaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!