Comment puis-je masquer de manière fiable les options dans les menus de sélection HTML5 ?

Masquage des options dans les menus de sélection HTML5 avec CSS

Malgré la possibilité de masquer éléments dans Firefox utilisant display : aucun ; CSS, Chrome pose un défi en affichant des options cachées en cliquant sur le bouton menu. Cela pose la question de savoir comment masquer efficacement les options correspondant aux critères de recherche tout en empêchant leur réapparition à l'ouverture du menu.

Solution : utiliser l'attribut masqué

Pour les navigateurs compatibles HTML5, l'attribut masqué L'attribut fournit une solution efficace. Cet attribut masque l'option à la fois dans l'affichage et dans la sélection, garantissant qu'elle reste invisible, quelle que soit l'interaction avec le menu.

<option hidden>Hidden Option</option>

Il est important de noter que l'attribut masqué n'est pas pris en charge dans les versions d'IE inférieures à 11. Cependant, si votre principale préoccupation est de cacher un petit nombre d'options, la combinaison des attributs masqués et désactivés offre une solution pragmatique par rapport aux techniques plus complexes impliquant l'ajout ou la suppression d'éléments ou la violation des conventions sémantiques.

  Option1
  Option2
  <option hidden>Hidden Option</option>

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!