Style de sélection de marque

L'API de sélection personnalisable offre un moyen déclaratif basé sur CSS de styliser les éléments <select> pour qu'ils correspondent parfaitement au système de conception de votre marque. En activant appearance: base-select, vous accédez au DOM fantôme interne de l'élément select, ce qui vous permet de styliser le bouton, la liste de sélection des options, l'icône en forme de flèche et l'indicateur de coche à l'aide de propriétés CSS standards.

Auparavant, pour obtenir un élément select entièrement personnalisé, il fallait recréer le contrôle à partir de zéro avec JavaScript, ce qui nuisait souvent à l'accessibilité, à la navigation au clavier et à l'intégration native des formulaires. Avec appearance: base-select, vous obtenez un aspect personnalisé, tandis que le navigateur gère la gestion du focus, l'affichage de la couche supérieure et les liaisons d'accessibilité.

Implémentation

Pour implémenter le style de sélection de marque :

1. Activer la personnalisation : appliquez appearance: base-select à l'élément <select> et au pseudo-élément ::picker(select) (qui cible la liste déroulante des options).
2. Structurer le bouton personnalisé (facultatif) : définissez un élément <button> directement dans <select> pour remplacer le déclencheur par défaut. Utilisez l'élément <selectedcontent> dans ce bouton pour représenter le texte ou le contenu de l'option actuellement sélectionnée.
3. Styliser la liste du sélecteur : utilisez le pseudo-élément ::picker(select) pour appliquer une typographie, des couleurs d'arrière-plan, des bordures et des ombres à la liste déroulante. Le navigateur l'affiche dans la couche supérieure, ce qui élimine les conflits de z-index.
4. Icônes internes de style :
   • Utilisez select::picker-icon pour styliser ou remplacer l'icône en forme de flèche.
   • Utilisez option::checkmark pour appliquer un style à l'indicateur de coche à côté de l'option active.
5. Options de style : appliquez des styles aux éléments <option> pour les états de survol, la marge intérieure et la mise en page.

Exemple de code : Branded Courier Select

L'exemple suivant illustre un élément select personnalisé avec une police à chasse fixe et des bordures en pointillés pour correspondre à l'esthétique d'une marque spécifique, "parcel".

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

Implémentation stratégique et bonnes pratiques

• UTILISEZ appearance: base-select lorsque votre système de conception nécessite une cohérence visuelle haute fidélité sur tous les contrôles de formulaire, qui ne peut pas être obtenue avec les remplacements de sélection standards entre les navigateurs.
• N'UTILISEZ PAS cette option si vous utilisez le sélecteur natif du système d'exploitation (par exemple, le sélecteur à molette standard sur les appareils iOS). L'activation de base-select désactive les commandes d'interface utilisateur mobile natives au profit de menus de niveau supérieur affichés sur le Web.
• À FAIRE : Vérifiez que le contraste des couleurs respecte les normes WCAG. Le sélecteur personnalisable vous permet de définir des couleurs ad hoc, mais vous devez vous assurer que le texte reste lisible sur les arrière-plans personnalisés.
• Tester le comportement de la mise en page La définition de appearance: base-select supprime le comportement par défaut du navigateur, qui consiste à dimensionner l'élément select en fonction de la largeur de l'option la plus longue. Vous devrez peut-être définir une largeur fixe ou utiliser des contraintes flex/grid pour éviter les décalages de mise en page.
• Assurez-vous que votre <select> comporte un attribut name et un <label> associé. Cela garantit que, même avec une UI personnalisée, le composant reste accessible aux lecteurs d'écran et fonctionne correctement avec les envois de formulaires standards.
• Utilisez les attributs value standards sur les options pour vous assurer que l'envoi du formulaire fonctionne exactement comme avant.

Stratégies de remplacement

Solutions de remplacement et compatibilité des navigateurs pour l'élément <select> personnalisable

Pour les navigateurs qui ne sont pas encore compatibles avec appearance: base-select, l'élément <select> se dégrade de manière fluide en un menu déroulant standard du système d'exploitation.

• Contenu non textuel ignoré : les anciens navigateurs suppriment les balises HTML (comme <svg> ou <div>) à l'intérieur des balises <option> et n'affichent que les nœuds de texte. Assurez-vous que le contenu textuel de <option> est lisible et compréhensible en lui-même.
• Gestion de la structure HTML : les analyseurs standards peuvent ignorer les balises <button> et <selectedcontent> dans <select> ou les traiter comme non valides. Aucun polyfill JavaScript lourd n'est strictement requis pour l'amélioration progressive si vous considérez le texte standard comme une solution de remplacement lisible.

document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});