html - 如何在 HTML 选择元素中只显示 "arrow"？

Question

基本上，我希望能够只显示下拉箭头，而不是与该下拉箭头关联的文本框。我不想显示该值，但如果有人更改选择，javascript onchange 事件仍会触发。

想法是什么？

保罗

Answer 1

仅适用于 Chrome 的解决方案

(一般来说可能是 webkit，但我无法测试)

我在旧的 IE7/8 中尝试过，但不起作用，因为它也将下拉菜单切断为设置的宽度。 Firefox 不显示箭头，而是截断文本，因为它是左对齐的。

解决方法如下:

应该很容易通过 CSS 设置控件的宽度并将其限制为箭头。我为 Chrome 构建的简单示例(在其他浏览器中实际上不起作用):

​<select style="width:18px">
    <option value="10000">Something</option>
    <option value="100">Other thing</option>
    <option value="1">The last option</option>
</select>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

fiddle 示例:http://jsfiddle.net/Fs7G5/