在菜单上显示<select>标签中的名称属性

Question

我正在用标签编码下拉菜单。是否有一种使用HTML或CSS将标签的name属性放在菜单顶部的方法？所以当它被折叠的时候，名字就会显示出来。

所以：

<select name="animals">
    <option>Dogs</option>
    <option>Cats</option>
</select>

无论菜单是折叠的，“动物”在窗口，或者如果它被扩展，“动物”在顶部。

<optgroup>标签也不是我想要的。

Answer 1

如果没有这两种方法，就无法做到这一点：

( 1)保留下降值的js，并将选项替换为“动物”。

或

2)做一个定制的下拉。

选择元素是那些不可手写的“本机”控件之一。除了他们要做的事外，你也不能用他们做什么。

Answer 2

您可以根据details使用HTML5元素：

<details>
<summary>animals</summary>
<select name="animals">
   <option>Dogs</option>
   <option>Cats</option>
</select>
</details>

浏览器支持仍然有限(虽然Chrome看起来不错)，所以您可以考虑使用JavaScript技术(在不同的库中可能有几十种替代方案)。但是，如果回退(出现在下拉列表前面的文本“动物”)是可以接受的，或者如果您认为可以轻松地将其样式或脚本写成可以接受的东西，那么这是一个简单的方法。