javascript 从下拉菜单中删除下拉（选择）按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4273493/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove dropdown (select) button from dropdown menus?
提问by Steven
I was wondering if there is a way to remove the dropdown (<select>) button (the little arrow) from the dropdown menu? I want to create a item list, but without the arrow.
我想知道是否有办法<select>从下拉菜单中删除下拉 ( ) 按钮（小箭头）？我想创建一个项目列表，但没有箭头。
- Steve
- 史蒂夫
采纳答案by Nick Craver
You can't do this, especially cross-browser. You can replace the <select>elements entirely with another control, but you can't modify how a <select>renders...not in the way you want at least.
你不能这样做，尤其是跨浏览器。您可以<select>用另一个控件完全替换元素，但您不能修改<select>渲染方式……至少不是您想要的方式。
Hereare a fewexamplesof replacements.
回答by Metagrapher
Perhaps you are looking for something more like this:
也许您正在寻找更像这样的东西：
<html>
<body>
<select size=1>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
</body>
</html>
This will create a select list of items one item tall. On some browsers there will still be an empty scrollbar, but it will get rid of the drop down arrow. As long as the size of the select tag is set then the arrow will not appear.
这将创建一个项目高一个项目的选择列表。在某些浏览器上，仍然会有一个空的滚动条，但它会去掉下拉箭头。只要设置了选择标签的大小，就不会出现箭头。
There are more options on select lists here: http://www.w3schools.com/tags/tag_select.asp
这里的选择列表有更多选项：http: //www.w3schools.com/tags/tag_select.asp
回答by Dani?l Tulp
this answerfrom Jo?o Cunhais working wonders for me
pure CSS!
纯CSS！
I added a bit of code to extend the browser support, see my answer in that questionor below:
我添加了一些代码来扩展浏览器支持，请参阅我在该问题或下面的回答：
select {
/*for firefox*/
-moz-appearance: none;
/*for chrome*/
-webkit-appearance:none;
text-indent: 0.01px;
text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
display: none;
}
回答by Manjit Singh
Try this code:
试试这个代码：
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;
}
itz work for me. Just try it.
itz 对我来说有效。去尝试一下。
