Select element: Short and Long names without javascript?

Question

Is there a non-javascript method to allow a <select> element to show short display text when collapsed and longer text when expanded? I came across the "label" attribute for <option> but it is only supported in IE7+.

Example:

The expanded menu would display:

• Philosophy 101
• Religious Studies 202
• Intro to Meditation 303
• Mind and its Potential 404

...while the collapsed menu would display (for the corresponding item):

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

What I'm using this for:

I'm attempting to clean up the layout of a form with several select menus. It's possible to achieve uniform widths for the menus using the CSS width property, but items with longer display text are cut off when the menu is collapsed. Displaying shorter text would fix this.

Answer 1

No, there isn't any way I'm aware of that would be able to do something like that without using JS. Something like this could be a possible start point, but only works in 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>