CSS IE 和 Firefox - 自定义下拉菜单无法删除本机箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18440019/
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
IE & Firefox - custom drop down could not remove native arrows
提问by Anton Belev
I'm trying create a custom drop down control and I need to hide the arrows from the native controls. I'm using the following CSS, which is working for Chrome and Safari, but not in Mozilla and IE.
我正在尝试创建一个自定义下拉控件，我需要隐藏本机控件的箭头。我正在使用以下内容CSS，它适用于 Chrome 和 Safari，但不适用于 Mozilla 和 IE。
select.desktopDropDown
{
appearance: none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
}
Here is a [jsfiddle][1].
这是一个 [jsfiddle][1]。
回答by Ahmed Na.
Use this it will work but with IE10+ and for FF :
使用它可以使用 IE10+ 和 FF ：
Your css should look like this:
你的 css 应该是这样的：
select.desktopDropDown::-ms-expand {
display: none;
}
More about ::ms-expand.
更多关于::ms-expand.
Then for the rest :
然后剩下的：
select.desktopDropDown {
outline : none;
overflow : hidden;
text-indent : 0.01px;
text-overflow : '';
background : url("../img/assets/arrow.png") no-repeat right #666;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
Note: I hardcoded path "../img/assets/arrow.png"as background.
注意：我将路径硬编码"../img/assets/arrow.png"为背景。
This should work good for you in IE, Firefox and Opera .
这应该适用于 IE、Firefox 和 Opera 。
回答by Jarrod
Bare-bones examples:
裸机示例：
For I.E:
对于 IE：
select::-ms-expand {
display: none;
}
For Firefox:
对于火狐：
select {
-moz-appearance: none;
appearance: none;
text-overflow: ''; /* this is important! */
}
回答by Brett Ryan
For Fx I use -moz-appearance: checkbox-containerwhich works nicely.
对于 Fx，我使用的-moz-appearance: checkbox-container效果很好。
So putting it all together the following should be sufficient for you:
因此，将所有这些放在一起对您来说应该足够了：
select.desktopDropDown {
appearance: none;
-webkit-appearance: none;
-moz-appearance: checkbox-container;
border-style: none;
}
select.desktopDropDown::-ms-expand {
display: none;
}
回答by KS74
In fact this trick is mainly required for IE10+ where the arrows are in the Metro style of Windows 8, even on Windows 7. Though Windows 8 users must be used to the style cause it's used through the OS. Anyway, I'd recommend instead of using:
事实上，这个技巧主要用于 IE10+，其中箭头是 Windows 8 的 Metro 风格，即使在 Windows 7 上也是如此。虽然 Windows 8 用户必须习惯这种风格，因为它是通过操作系统使用的。无论如何，我建议而不是使用：
display: none;
To use:
使用：
visibility: hidden;
Because, at least in IE, the former causes the blue line of the selected item to overlay the dropdown arrow when the select is focused, while the latter does not.
因为，至少在 IE 中，前者会导致 select 聚焦时被选中项的蓝线覆盖下拉箭头，而后者则不会。
回答by SantoshK
we can create custom by using css. tested on IE10, Mozilla and chrome borwser...
Working Example as below :
我们可以使用css创建自定义。在 IE10、Mozilla 和 chrome 浏览器上测试...
工作示例如下：
.customSelect {
position: relative;
}
/* IE11 hide hacks*/
select::-ms-expand {
display: none;
}
.customSelect:after {
content: '<>';
font: 17px "Consolas", monospace;
color: #333;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
right: 11px;
/*Adjust for position however you want*/
top: 18px;
padding: 0 0 2px;
border-bottom: 1px solid #999;
/*left line */
position: absolute;
pointer-events: none;
}
.customSelect select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Add some styling */
display: block;
width: 100%;
height: 50px;
float: none;
margin: 5px 0px;
padding: 0px 24px;
font-size: 16px;
line-height: 1.75;
color: #333;
background-color: #ffffff;
background-image: none;
border: 1px solid #cccccc;
-ms-word-break: normal;
word-break: normal;
}<div class="customSelect">
<label>
<select>
<option selected> Select Box </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Last long option</option>
</select>
</label>
</div>