[Résolu]Styler les <option> en css

bonjour,

je viens a vos lumières car j'ai un petit souci.

je vais tenter de vous expliquer ça du mieux que je peux étant donné que je n'ai aucun exemple ni screenshots a vous donner, pardonnez moi.

Mon objectif est de styler des <option> dans un form.

Le problème :

j'ai un menu avec des menu déroulants. (donc des select avec des options dedans)

les selects ont une taille bien définis (300px)

quand on déroule la liste certains option font bcp plus que 300px car ils contiennent des textes assez long.

Les options s'agrandissent sans prob sous ff3.6 IE9 Chrome...etc.
sauf sous IE7/8 ou il reste a la taille spécifié dans le select... du coup les textes longs des options sont tronqués !

j'ai essayer par tous les moyens en css d'arranger cela mais impossible. IE7/8 ne veut pas prendre les styles pour les options.

La Question :

existe il un moyen de styler efficacement des options sous IE7/8 ?

je pense qu'il est possible de le faire en JQuery, Ajax... mais j'aimerai envisager cette éventualité vraiment qu'en dernier recourt.

Malgré tout je suis preneur si vous avez également une solution en JS.


Merci a tous de m'avoir lu et de vos réponse !
Modifié par eszwal (18 May 2011 - 15:40)

Bonjour,

eszwal a écrit :
La Question : existe il un moyen de styler efficacement des options sous IE7/8 ?

Non, sous aucun navigateur quel qu'il soit.

Il y a quelques solutions de contournement:
- Soit tu te contentes d'un <select> natif (avantage: a une tête de composant natif du système d'exploitation, facile à faire), et tu te débrouilles pour avoir des intitulés pas trop longs. Les intitulés peuvent dépasser dans certains cas mais il faudra que la partie visible suffise à faire un choix. C'est souvent possible.
- Soit tu utilises des <input type="radio"> plutôt qu'un <select>. C'est parfois plus adapté. À éviter si tu as 15 choix à lister, bien sûr.
- Soit tu fabriques une liste déroulante à partir d'éléments HTML génériques, en utilisant une forte dose de CSS et de JavaScript. (Problèmes: dépendance à JS, accessibilité souvent flinguée sauf si on est un cador du JS accessible ce qui est rare, temps de développement explosé pour pas grand chose sauf à utiliser une lib JS existante et dont on ne peut garantir la qualité.)

J'ai trouvé une réponse :

ICI

C'est simple et ça marche très bien.

Merci pour tes réponses et conseils,


++
Modifié par eszwal (18 May 2011 - 15:39)

Bonjour,
je me permet de poster ici au lieu de poster un nouveau sujet car j'ai une question qui s'apparente :

J'ai fais une liste déroulante avec la liste des utilisateurs de mon site (<select><option></option>...</select>). Pour afficher une miniature de leur avatar à côté du nom j'utilise le CSS suivant :

option {
    background-repeat: no-repeat;
    padding-left: 22px;
    height : 21px;
}

et dans chaque <option> j'ajoute via php

style="background-image: url('img/avatars/lavatardelutilisateur.png')"

Ca fonctionne très bien dans la mesure où :
-Les avatars s'affichent exactement comme je le veux dans Firefox.
-La liste est tout à fait utilisable (sans les avatars) dans Chrome et Opera.
-Le html est valide d'après le validateur du W3C.
-Le CSS est valide d'après le validateur du W3C.


Donc maintenant la question : D'un point de vu purement théorique (suivant les standard html et css), est-il correct d'appliquer ce style à un élément <option> ? Le fait que le style ne soit pas affiché par la plupart des navigateurs ne me dérange absolument pas, je cherche juste à savoir si ma méthode est correcte, ou si j'exploite simplement un bug de Firefox.
Modifié par BlueScreenJunky (11 Dec 2011 - 14:31)