5568 sujets

Sémantique web et HTML

Liste déroulante - mettre l'option sélectionnée en couleur

Bonjour,

J'ai 2 questions toutes simples concernant les listes déroulantes mais je ne trouve pas la solution sur le net...

1) Est-il possible de mettre l'option sélectionnée en couleur ?

2) Est-il possible de mettre la toute première option "Sélectionner votre choix" en couleur ?

Merci
Bonjour,

1. Oui : 

option[selected=selected]{
  background:red;
}

(bien que j'y vois peut d’intérêt puisque c'est elle qui apparaît quand la liste est fermée, elle est déjà "mise en avant)

2. j'avoue ne pas comprendre pourquoi ta première option est "Sélectionner votre choix". Ce n'est pas une option ça mais un label pour ta liste déroulante ou bien ?

Par contre styler les listes déroulantes qui sont des contrôles natifs du navigateur c'est super foireux. Donc le code "théorique" que je t'ai donné pourrait ne pas marcher sur tous les navigateurs (notamment les mobiles)
a écrit :
2. j'avoue ne pas comprendre pourquoi ta première option est "Sélectionner votre choix". Ce n'est pas une option ça mais un label pour ta liste déroulante ou bien ?

Je pense qu'il veut parler de la vraie fausse option souvent présente et sélectionnée initialement qui s'intitule « Choisissez », « Votre choix », « Sélectionnez une option », ou plus laconiquement « - » ou « *** ». C'est extrêmement courant et on le fait tous, mais ça n'en reste pas moins effectivement une mauvaise habitude qu'on devrait abandonner.

A ce sujet, il serait intéressant de savoir ce que font les navigateurs avec placeholder, et notamment s'ils l'affichent quand aucune option n'est sélectionnée (ce qui est possible dans un état initial). Sémantiquement parlant, ce serait la meilleure solution pour proposer ce genre d'invite. A mon sens ça ne peut vraiment pas être un label car « Votre choix » et toutes les autres appellations du même genre sont beaucoup trop vagues, on ne peut pas du tout savoir à quel type de choix s'attendre.

a écrit :
Par contre styler les listes déroulantes qui sont des contrôles natifs du navigateur c'est super foireux. Donc le code "théorique" que je t'ai donné pourrait ne pas marcher sur tous les navigateurs (notamment les mobiles)

J'ai aussi de gros doutes avec IE. Mais de toute manière, effectivement, dans un monde idéal, c'est censé être la responsabilité du navigateur et de personne d'autre (pas celle du designer) de mettre en évidence l'option actuellement sélectionnée.
Bonjour et pardon pour mon retour tardif !

En effet, Quentin a vu juste, "Sélectionner votre choix" est une vraie fausse option.

Quel est l'intérêt de mes questions?
Imaginez une page avec une multitude de listes déroulantes les une en dessous des autres.
Visuellement c'est pas terrible mais la première des contraintes est que l'on peux louper certaines listes déroulantes car on ne saurait plus trop où on en est...

Pour palier à ce "problème", soit 2 solutions :
A - une fois que je sélectionne un choix dans la liste, la liste devient verte (donc je sais que cette liste a été faite)
B - la valeur par défaut ("Sélectionner votre choix") est en rouge et une fois que je sélectionne un choix dans la liste, la couleur rouge disparait (car ce n'est plus la valeur par défaut) (donc je sais que cette liste a été faite)

L'idéal serait que le background change de couleur après oui, tous les navigateurs ne réagissent pas pareil... surtout IE Smiley lol

Merci


<html>
<head>
  <title>Mon select</title>
  <style type="text/css">
  body {
    background-color: #99B2FF
	}
  </style>
</head>

<body>
<select>
   <option value="0">Sélectionner votre choix</option>
   <option value="1">aaaa</option>
   <option value="2">bbbb</option>
   <option value="3">cccc</option>
   </select>
</body>
</html>
Hello,

Savez vous s'il est possible de faire ça avec une liste déroulante ?

Merci
a écrit :
A - une fois que je sélectionne un choix dans la liste, la liste devient verte (donc je sais que cette liste a été faite)


Ce genre de chose je pense que tu peux le faire avec les API HTML5 de validation; normalement il y a moyen de faire une validation personnalisée manuelle et de déclencher les styles en fonction de l'état valide ou invalide. Ca va te faire quelques lignes de js à peine juste pour indiquer que si index sélectionné > 0 alors valide, sinon invalide (>0 si on considère que le faites votre choix est la 0 et sans oublier que -1 est possible si rien n'est sélectionné)

En CSS3, tu as les pseudo-classes valid et invalid, mais vu que ce n'est pas compatible partout, je suggère que tu fasses d'une pierre deux coups (à la fois accessibilité et design) en utilisant l'attribut aria-invalid. C'est valide = tu supprimes l'attribut, c'est invalide = tu positionnes l'attribut à true. Et ensuite en CSS tu as juste à ajouter une règle XXX[aria-invalid]; sauf erreur la sélection par attribut marche depuis IE8.

a écrit :
B - la valeur par défaut ("Sélectionner votre choix") est en rouge et une fois que je sélectionne un choix dans la liste, la couleur rouge disparait (car ce n'est plus la valeur par défaut) (donc je sais que cette liste a été faite)

Là comme déjà dit, tu vas avoir du mal avec IE pour que seule l'option faites votre choix apparaisse dans une autre couleur. Le mieux c'est de faire quelque chose qui va dans la direction du point A.

Par contre, je crois qu'en CSS3, on peut indiquer des autres styles pour le placeholder. A voir si placeholder marche pour les listes déroulantes, et jusqu'où c'est compatible avec les anciens navigateurs (à priori sans vérifier je dirais pas avant IE9 pour placeholder). Si ça ça marche, alors c'est une bonne solution aussi, et ça éviterait d'utiliser une pseudo-option faites votre choix.
Sujet clos
Aller à