Comment puis-je ajouter facilement des icônes claires aux champs de saisie de texte ?

Création d'entrées de texte clair avec des icônes

Dans les formulaires Web, il est souvent souhaitable de fournir un moyen intuitif d'effacer la valeur d'entrée, en particulier pour éléments de saisie de texte. Cela peut améliorer l'expérience utilisateur en permettant la suppression rapide des entrées sans recourir à la navigation par curseur.

Solutions basées sur jQuery

jQuery propose plusieurs plugins qui facilitent la création d'entrées. éléments avec des icônes claires intégrées. Ces plugins permettent un positionnement précis de l'icône dans le champ de saisie.

Implémentation CSS personnalisée

Vous pouvez également utiliser du CSS personnalisé pour créer une icône claire sans compter sur bibliothèques tierces.

input[type=search] {
  padding-right: 20px;  /* Adjust as needed */
}

input[type=search]::after {
  content: "×";
  position: absolute;
  right: 5px;  /* Adjust as needed */
  top: 5px;  /* Adjust as needed */
  font-size: 14px;
  color: #ccc;
  cursor: pointer;
}

input[type=search]:focus::after {
  color: #000;
}

Utilisation de la "recherche" Attribut

Une solution simple consiste à ajouter un attribut type="search" à l'élément d'entrée. Cela affichera automatiquement une icône claire dans les navigateurs modernes. Cependant, il convient de noter que cette méthode ne fonctionnera pas dans les versions d'Internet Explorer antérieures à 10.

<input type="search">

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!