Html 如何从下拉列表中删除默认箭头图标（选择元素）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16603979/
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
How to remove the default arrow icon from a dropdown list (select element)?
提问by user2301515
I want to remove the dropdown arrow from a HTML <select>element. For example:
我想从 HTML<select>元素中删除下拉箭头。例如：
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
How to do it in Opera, Firefox and Internet Explorer?
如何在 Opera、Firefox 和 Internet Explorer 中执行此操作？
回答by nrutas
There's no need for hacks or overflow. There's a pseudo-element for the dropdown arrow on IE:
不需要黑客或溢出。IE 上的下拉箭头有一个伪元素：
select::-ms-expand {
display: none;
}
回答by Varun Rathore
The previously mentioned solutions work well with chrome but not on Firefox.
前面提到的解决方案适用于 chrome，但不适用于 Firefox。
I found a Solutionthat works well both in Chrome and Firefox(not on IE). Add the following attributes to the CSS for your SELECTelement and adjust the margin-top to suit your needs.
我找到了一个在 Chrome 和 Firefox 中都运行良好的解决方案（不适用于 IE）。将以下属性添加到 SELECT 元素的 CSS 并调整 margin-top 以满足您的需要。
select {
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
Hope this helps :)
希望这可以帮助 ：）
回答by Sangeet Shah
Simple way to remove drop down arrow from select
从选择中删除下拉箭头的简单方法
select {
/* for Firefox */
-moz-appearance: none;
/* for Chrome */
-webkit-appearance: none;
}
/* For IE10 */
select::-ms-expand {
display: none;
}<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>回答by EpokK
Try this :
尝试这个 ：
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 30px 2px 2px;
border: none;
}
JS Bin : http://jsbin.com/aniyu4/2/edit
JS 斌：http: //jsbin.com/aniyu4/2/edit
If you use Internet Explorer :
如果您使用 Internet Explorer：
select {
overflow:hidden;
width: 120%;
}
Or you can use Choosen : http://harvesthq.github.io/chosen/
或者你可以使用选择：http: //harvesthq.github.io/chosen/
回答by Luke Kalyan Brata Sarker
Try This:
尝试这个：
HTML:
HTML：
<div class="customselect">
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>
CSS:
CSS：
.customselect {
width: 70px;
overflow: hidden;
}
.customselect select {
width: 100px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
回答by Mahesh Shitole
Try this it works for me,
试试这个对我有用，
<style>
select{
border: 0 !important; /*Removes border*/
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-overflow:'';
text-indent: 0.01px; /* Removes default arrow from firefox*/
text-overflow: ""; /*Removes default arrow from firefox*/
}
select::-ms-expand {
display: none;
}
.select-wrapper
{
padding-left:0px;
overflow:hidden;
}
</style>
<div class="select-wrapper">
<select> ... </select>
</div>You can not hide but using overflow hidden you can actually make it disappear.
您无法隐藏，但使用溢出隐藏实际上可以使其消失。
回答by sun2
Just wanted to complete the thread. To be very clear this does not works in IE9, however we can do it by little css trick.
只是想完成线程。很明显，这在 IE9 中不起作用，但是我们可以通过一点点 css 技巧来做到这一点。
<div class="customselect">
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>
.customselect {
width: 80px;
overflow: hidden;
border:1px solid;
}
.customselect select {
width: 100px;
border:none;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
回答by Tejasvi Hegde
As I answered in Remove Select arrow on IE
正如我在 IE 上的删除选择箭头中回答的那样
In case you want to use the class and pseudo-class:
如果您想使用类和伪类：
.simple-controlis your css class
.simple-control是你的css类
:disabledis pseudo class
:disabled是伪类
select.simple-control:disabled{
/*For FireFox*/
-webkit-appearance: none;
/*For Chrome*/
-moz-appearance: none;
}
/*For IE10+*/
select:disabled.simple-control::-ms-expand {
display: none;
}
回答by Mitul
select{
padding: 11px 50px 11px 10px;
background: rgba(255,255,255,1);
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #8ba2d4;
}
}
回答by SK.
Works for all browsers and all versions:
适用于所有浏览器和所有版本：
JS
JS
jQuery(document).ready(function () {
var widthOfSelect = $("#first").width();
widthOfSelect = widthOfSelect - 13;
//alert(widthOfSelect);
jQuery('#first').wrap("<div id='sss' style='width: "+widthOfSelect+"px; overflow: hidden; border-right: #000 1px solid;' width=20></div>");
});
HTML
HTML
<select class="first" id="first">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
