Sélectionnez un élément: Noms courts et longs sans javascript?

Question

Existe-t-il une méthode non-javascript pour permettre à un élément < sélectionner > d'afficher un texte d'affichage court lorsqu'il est réduit et un texte plus long lorsqu'il est développé? Je suis tombé sur l'attribut "label" pour <option> mais il est seulement pris en charge dans IE7 +.

Exemple:

Le menu élargi afficherait:

• Philosophie 101
• études religieuses 202
• Intro à la méditation 303
• esprit et son potentiel 404

... tandis que le menu réduit afficherait (pour l'élément correspondant):

• PHIL 101
• RELI 202
• MEDI 303
• ESPRIT 404

Ce que j'utilise cela pour:

Je tente de nettoyer la mise en page d'un formulaire avec plusieurs menus de sélection. Il est possible d'obtenir des largeurs uniformes pour les menus en utilisant la propriété width CSS, mais les éléments avec un texte d'affichage plus long sont coupés lorsque le menu est réduit. L'affichage d'un texte plus court résoudrait cela.

Answer 1

Non, je ne connais aucun moyen de faire quelque chose comme ça sans utiliser JS. Quelque chose comme ceci pourrait être un point de départ possible, mais ne fonctionne que dans Firefox:

<style> 
    .sel:focus .l{display:; visibility: visible;} 
    .sel:focus .s{display: none; visibility: hidden;} 
</style> 
<select class="sel"> 
    <option class='s'>ntry1</option> 
    <option class='l'>entry aaaaaaa</option> 
    <option class='s'>entry2</option> 
    <option class='l'>entry bbbbbbb</option> 
</select>