Question

我想知道是否有办法从下拉菜单中删除下拉列表（<select>）按钮（小箭头）？我想创建一个项目列表，但没有箭头。

史蒂夫

Answer 1

你不能这样做，尤其是跨浏览器。您可以使用其他控件完全替换<select>元素，但无法修改<select>呈现的方式......至少不是您想要的方式。

Answer 2

也许你正在寻找更像这样的东西：

<html>
  <body>

  <select size=1>
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
  </select>

  </body>
</html>

这将创建一个项目高的项目的选择列表。在某些浏览器上仍然会有一个空的滚动条，但它会摆脱下拉箭头。只要设置了选择标记的大小，就不会出现箭头。

此处的选择列表还有更多选项：http://www.w3schools.com/tags/tag_select.asp

Answer 3

来自this answer的

João Cunha正在为我创造奇迹

纯CSS！

我添加了一些代码来扩展浏览器支持，请参阅my answer in that question或更低版本：

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}

Answer 4

试试这段代码：

select {
   -webkit-appearance: none;
   background-color: #FFF;
   border: medium none;
   color: #555555;
   font-family: inherit;
   outline: medium none;
   overflow: hidden;
   padding: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 10em;
   height: 1em;
}

它对我有用。试试吧。

从下拉菜单中删除下拉列表（选择）按钮？

4 个答案: