Comment contrôler la largeur des options déroulantes de sélection HTML ?

Gestion efficace de la largeur pour les options de liste déroulante HTML

Remplir une zone de sélection avec de longues options pose un défi lorsque la largeur de la liste déroulante dépasse les limites de l'écran . La définition manuelle de la largeur de la zone de sélection ne parvient souvent pas à limiter la largeur du menu déroulant.

Une solution consiste à encapsuler la zone de sélection dans un conteneur div à largeur fixe. En définissant la largeur du div et la largeur de la balise de sélection sur « auto », la plupart des navigateurs contiendront la liste déroulante dans le div. Cependant, en cliquant, la liste déroulante s'agrandit pour afficher les options complètes.

HTML :

<code class="html"><div class="dropdown_container">
  <select class="my_dropdown" id="my_dropdown">
    <option value="1">LONG OPTION</option>
    <option value="2">short</option>
  </select>
</div></code>

CSS :

<code class="css">div.dropdown_container {
    width:10px;
}

select.my_dropdown {
    width:auto;
}

/*IE FIX */
select#my_dropdown {
    width:100%;
}

select:focus#my_dropdown {
    width:auto;
}</code>

Cette méthode gère efficacement la largeur de la liste déroulante sans compromettre la lisibilité. Le conteneur div restreint la largeur initiale de la liste déroulante, tandis que la largeur « auto » de la sélection permet une expansion transparente lors d'un clic. Pour la compatibilité avec Internet Explorer, le correctif CSS inclus garantit un rendu correct.

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!