Изберете елемент: Кратки и дълги имена без javascript?

Има ли метод без JavaScript, който да позволи на елемент ‹select› да показва кратък показван текст, когато е свит, и по-дълъг текст, когато е разгънат? Попаднах на атрибута "label" за ‹option›, но той се поддържа само в IE7+.

Пример:

Разширеното меню ще покаже:

  • Философия 101
  • Религиозни изследвания 202
  • Въведение в медитацията 303
  • Умът и неговият потенциал 404

... докато свитото меню ще се покаже (за съответния елемент):

  • ФИЛ 101
  • РЕЛИ 202
  • МЕДИ 303
  • УМ 404

За какво използвам това:

Опитвам се да изчистя оформлението на формуляр с няколко избрани менюта. Възможно е да се постигнат еднакви ширини за менютата, като се използва свойството CSS width, но елементите с по-дълъг показван текст се отрязват, когато менюто се свие. Показването на по-кратък текст би поправило това.


javascript menu forms html-select
person cardflopper    schedule 18.10.2009    source източник

Отговори (1)


arrow_upward
0
arrow_downward

Не, няма начин, за който знам, че би могъл да направи нещо подобно, без да използва JS. Нещо подобно може да бъде възможна начална точка, но работи само във 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>
person Marius Burz    schedule 18.10.2009