4

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

想法？

保罗

4

3 回答 3

6

仅适用于 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/

于 2012-08-23T18:14:36.883 回答
-1 
 <select><option></select>

这没有多大意义，但它回答了所提出的问题。

于 2012-08-23T19:27:00.890 回答
-1

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

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

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

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

于 2016-11-23T18:01:41.493 回答