Question

是否有非JavaScript方法允许＆lt; select＆gt;元素在折叠时显示短显示文本，在展开时显示较长文本？我遇到了＆lt; option＆gt;的“label”属性但它仅在IE7 +中受支持。

示例：

展开的菜单会显示：

哲学101
宗教研究202
冥想简介303
心灵及其潜力404

...折叠菜单会显示（对应相应的项目）：

PHIL 101
RELI 202
MEDI 303
MIND 404

我正在使用它：

我正在尝试使用多个选择菜单来清理表单的布局。使用CSS width属性可以为菜单实现统一的宽度，但折叠菜单时会切断显示文本较长的项目。显示较短的文字会解决这个问题。

Answer 1

不，我没有任何方法可以在不使用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>

选择元素：没有javascript的短名和长名？

1 个答案: