从下拉菜单中删除下拉菜单（选择）？

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

史蒂夫

来源

2010-11-25 Steven

你不能做到这一点，尤其是跨浏览器。您可以完全用另一个控件替换<select>元素，但不能修改<select>呈现的方式......至少不符合您的要求。

Here是的few examples。

来源

2010-11-25 03:26:26

此外，检查出这篇文章：http://tutorialzine.com/2010/11/better-select -jquery-css3/ – Metagrapher 2010-11-29 19:17:40

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

<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

来源

2010-11-25 04:04:39 Metagrapher

-1

试试这个代码：

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; 
}

我伊茨工作。去尝试一下。

来源

2013-02-02 11:13:27

这不起作用，如果您确实认为它确实如此，请提供示例 – 2013-11-27 07:37:40

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; 
}

来源

2013-12-09 11:40:38

从下拉菜单中删除下拉菜单（选择）？

回答

相关问题