Maison >interface Web >tutoriel CSS >Comment puis-je créer facilement un champ de texte de saisie effaçable avec une icône interne ?

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

Barbara Streisand
Barbara Streisandoriginal
2024-12-13 20:09:21443parcourir

How Can I Easily Create a Clearable Input Text Field with an Internal Icon?

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn