forms - Select element: Short and Long names without javascript? -

Does anyone & lt; Select & gt; When is it short, the text to show the small display text and the longer the text when it's expanded? I & lt; Option & gt; I've come to the "label" attribute for.

Example:

The expanded menu will be displayed:

• Visions 101
• Religious Studies 202
• Introduction to Meditation 303
• Mind and its potential 404

... while the collapsed menu will appear (for the same item

MIDI 303

MIND 404

P> What I'm using for:

I am trying to clear the layout of a form with many select menus. It is possible to get the width of the uniform for the menu while using it, but when the menu collapses, the items with the display text are cut off. Displaying the small text will correct it.

No, I do not know about this, would be able to do something without using JS. Something like this could be a possible starting point , But only works in Firefox:

  & lt; style & gt; .sel: focus.l {display:; visibility: visible;} .sel: focus .s {display: none; Visibility: hidden;} & lt; / Style & gt; & Lt; Select class = "sel" & gt; & Lt; Option class = 's' & gt; Ntry1 & lt; / Options & gt; & Lt; Option class = 'l' & gt; Admissions Aaaaaa & lt; / Options & gt; & Lt; Option class = 's' & gt; Entry 2 & lt; / Options & gt; & Lt; Option class = 'l' & gt; Entry BBBBBBB & lt; / Options & gt; & Lt; / Select & gt;