Comment styliser une liste déroulante sélectionnée dans HTML

Utilisez des CS de base pour ajouter des polices, des bordures, des coins arrondis et des flèches personnalisées à compatibles, mais certains navigateurs conservent toujours des styles natifs; 2. Si vous avez besoin d'avoir un contrôle total du style, vous pouvez utiliser JavaScript et Div pour créer des menus déroulants personnalisés pour obtenir un contenu riche tel que les animations et les icônes; 3. Il est recommandé d'utiliser des bibliothèques telles que Select2, Choices.js ou React Select pour obtenir rapidement des boîtes déroulantes belles et accessibles; 4. Dans tous les cas, vous devez vous assurer de prendre en charge la navigation au clavier, les propriétés ARIA et une bonne expérience dans les appareils mobiles pour prendre en compte la convivialité et la conception.

Le style d'une liste déroulante <select></select> dans HTML peut être délicat car les éléments de forme native sont rendus différemment d'un navigateur et des systèmes d'exploitation. Bien que vous puissiez appliquer le CSS de base pour changer les couleurs, les polices et le rembourrage, la personnalisation complète (comme changer l'icône de la flèche ou l'ajout de bordures personnalisées) nécessite des solutions de contournement. Voici comment l'aborder efficacement.

1. Style CSS de base (amical simple et transversal)

Vous pouvez styliser un élément <select></select> avec CSS standard. Cela fonctionne bien dans la plupart des cas et maintient l'accessibilité et les fonctionnalités.

 <sélectionnez class = "personnalisé-select">
  <Option Value = "Option1"> Option 1 </ Option>
  <Option Value = "Option2"> Option 2 </ Option>
  <Option Value = "Option3"> Option 3 </ Option>
</lect>

 .Custom-Select {
  taille de police: 16px;
  rembourrage: 10px;
  Border: 2px solide #ccc;
  Border-Radius: 8px;
  Color d'arrière-plan: blanc;
  Couleur: # 333;
  Largeur: 200px;
  Apparence: aucun; / * Supprime le style par défaut * /
  -Webkit-apparence: aucun;
  -Moz-apparence: aucun;
  Position: relative;
  Background-Image: URL (&#39;data: image / svg xml; utf8, <svg fill = "# 333" xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 10 6"> <path d = "m1 1l4 4 4-4" /> </vg>&#39;);
  République de fond: sans répétition;
  Position d&#39;arrière-plan: centre 10px droit;
  taille arrière: 12px;
  padding-droite: 30px;
}

• appearance: none supprime le style spécifique au système d'exploitation par défaut.
• Utilisez une image d'arrière-plan (SVG en ligne est pratique) pour remplacer la flèche déroulante par défaut.
• Ajoutez un rembourrage pour faire de la place pour la flèche personnalisée.

Remarque: Même avec appearance: none , certains navigateurs (en particulier le safari mobile) montrent toujours des commandes natives. Pour un contrôle complet, vous aurez besoin d'une solution personnalisée.

2. Dropdown entièrement personnalisé à l'aide de JavaScript et Divs

Si vous avez besoin d'un contrôle de conception parfait (par exemple, des options personnalisées, des animations, des icônes), remplacez le natif <select> par une liste déroulante personnalisée construite à partir de div S et JavaScript.

 <div class = "Custom-dropdown">
  <div class = "dropdown-header" id = "dropdown-toggle"> sélectionnez une option </div>
  <ul class = "dropdown-options" id = "dropdown-options" style = "affiche: aucun;">
    <li data-valeur = "1"> Option 1 </li>
    <li data-vale = "2"> Option 2 </li>
    <li data-vale = "3"> Option 3 </li>
  </ul>
</div>

 .Custom-dropdown {
  Position: relative;
  Largeur: 200px;
  Font-Family: Arial, Sans-Serif;
}

.Dropdown-header {
  rembourrage: 10px;
  Border: 2px solide # 007BFF;
  Border-Radius: 8px;
  Color d'arrière-plan: blanc;
  curseur: pointeur;
  Texte-aligne: gauche;
}

.dropdown-options {
  Style de liste: aucun;
  marge: 0;
  rembourrage: 0;
  Border: 1px solide #ddd;
  Border-top: Aucun;
  Border-Radius: 0 0 8px 8px;
  Contexte: blanc;
  Position: absolue;
  Largeur: 100%;
  Z-Index: 1000;
  max-height: 200px;
  débordement-y: auto;
}

.dropdown-options li {
  rembourrage: 10px;
  curseur: pointeur;
}

.Dropdown-Options li: Hover {
  Color d'arrière-plan: # F0F0F0;
}

 const toggle = document.getElementById («Dropdown-toggle»);
const Options = document.getElementById («Dropdown-options»);
const alloptions = options.QuerySelectorAll ('li');

toggle.addeventListener ('click', () => {
  const isVisible = options.style.display === 'Block';
  options.style.display = est Visible? «Aucun»: «bloc»;
});

alloptions.ForEach (option => {
  option.addeventListener ('click', () => {
    toggle.textContent = option.TextContent;
    options.style.display = 'Aucun';
    // déclenchent éventuellement un événement de modification ou mettez à jour une entrée masquée
  });
});

// fermer la liste déroulante lorsque vous cliquez à l'extérieur
document.addeventListener ('click', (e) => {
  if (! e.target.closest ('. Custom-dropdown')) {
    options.style.display = 'Aucun';
  }
});

Cette méthode vous donne un contrôle visuel complet et permet un contenu riche (images, icônes, etc.) dans les options.

3. Utilisez un cadre ou une bibliothèque CSS

Pour un développement plus rapide, envisagez d'utiliser des bibliothèques qui gèrent la compatibilité et l'accessibilité des navigateurs:

• SELECT2 - basé sur JQuery, hautement personnalisé.
• Choices.js - léger, moderne, pas de dépendances.
• React Select - Si vous utilisez React.
• Tailwind CSS - Utilisez avec des composants personnalisés pour le style utilitaire d'abord.

Exemple avec Choices.js :

 <script src = "https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"> </ script>
<link rel = "Stylesheet" href = "https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">

<select id = "Choices-Select">
  <Option Value = "1"> Apple </ Option>
  <Option Value = "2"> Banana </ Option>
  <Option Value = "3"> Orange </opoption>
</lect>

<cript>
  Nouveaux choix (&#39;# Choices-Select&#39;, {
    SearchAnabled: False,
    itemSelectText: &#39;&#39;,
  });
</cript>

Ces bibliothèques gèrent la navigation du clavier, l'accessibilité (ARIA) et le style de manière cohérente.

Conseils clés

• Considérez toujours l'accessibilité : les lecteurs d'écran s'appuient sur les éléments natifs <select></select> .
• Si vous utilisez une liste déroulante personnalisée, ajoutez des rôles Aria ( role="listbox" , aria-selected , etc.) et prends en charge la navigation par clavier (touches Arrow, Entrée).
• Tester sur mobile - Sélectionne les natifs déclenchent souvent le sélecteur intégré de l'appareil, ce qui est généralement meilleur pour UX.
• Évitez de sur-style au point de briser la convivialité.

Fondamentalement, vous pouvez faire un style léger avec CSS, mais pour un contrôle complet, allez personnaliser ou utiliser une bibliothèque éprouvée. C'est un équilibre entre les besoins de conception et la convivialité.

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!