我如何只在HTML选择元素中显示“箭头”？

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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

示例小提琴：http://jsfiddle.net/Fs7G5/

Answer 2

 <select><option></select>

它没有多大意义，但它回答了问题。

Answer 3

您将找不到跨浏览器解决方案。您可能希望将所有浏览器的所有外观设置为无，然后构建一个可满足您要求的自定义样式选择/选项。即使JS onchange事件具有自定义样式，它仍将正常启动。

您可以在MDN上阅读appearance，但请注意，它不会得到完全支持。您可以暂时使用的示例：

appearance: none; -webkit-appearance: none; -moz-appearance: none;

如果您尝试设置自己的解决方案，则需要调整border，border-radius和background-color等属性。