Select skinnable grâce à JS

[ZeBrian]

Bonsoir tout le monde,

Un peu exaspéré par la (presque) impossibilité de styler en CSS les balises <select> et <option>, j'ai décidé d'y créer une alternative à peu près équivalent en JavaScript. Le principe est simple : au chargement de la page, si l'utilisateur a JavaScript, on remplace tous ses <select> par des <div> qui se comportent de la même manière, et qui sont donc par nature skinnables.

Cela donne ceci : http://88.167.224.84/project_select/

Au niveau de la structure HTML de ce que j'ai appelé les "fakeSelect", on a un <div class="fSelect"> qui contient principalement un <div class="fContainer"> qui lui-même contient toutes les options (qui sont des <div class="fOption">), mais aussi, si l'on n'utilise pas un select multiple, un <div class="fSelectHead"> qui correspond à l'option sélectionnée actuellement.

Il est à noter que la classe de certains de ces objets peut changer : par exemple, une option sélectionnée sera de classe "fOption_selected". De plus, si la souris passe dessus, ce sera "fOption_selected_hover" (car le hover CSS n'est pas supporté par IE6 sur des <div>, et je trouvais assez sale de mettre des <a>). De même pour les autres classes (à part fSelect et fContainer bien sûr), pour mieux comprendre voyez le fichier CSS !

Si jamais ce gadget vous semble utile, merci de me le faire savoir, je prendrai la peine de le publier pour que vous ne soyez pas les seuls à en profiter

[Dudu]

Salut

on remplace tous ses <select> par des <div>

Question sémantique, on frôle le niveau zéro

Et pourquoi pas remplacer toutes nos balises par <div>, tant qu'à faire ? Ce serait aussi "sale" qu'avec des <a> et en plus on prendrait en charge Explorer

D'autant que le grand interêt des listes déroulantes et de pouvoir naviguer au clavier en tapant les premières lettres de l'option désirée, ou en utilisant les flèches haut et bas.

Dans ton cas, on ne peut pas.

Désolé, mais je vois très peu d'utilité à ton script. Je considère même que c'est une régression sous beaucoup d'aspects.

Alors oui certes, on peut mieux le styliser avec CSS. Mais tout ça pour ça, le jeu n'en vaut pas la chandelle AMHA.

Merci quand même

[ZeBrian]

Si ce n'est que ça, c'est possible de reconstituer également la réactivité aux touches du clavier !

Je reposterai un message quand j'aurai rajouté toutes les fonctionnalités dont tu me parles