如何从下拉列表（选择元素）中删除默认箭头图标？
Posted
技术标签:
【中文标题】如何从下拉列表（选择元素）中删除默认箭头图标？【英文标题】：How to remove the default arrow icon from a dropdown list (select element)? 【发布时间】：2013-05-12 07:45:01 【问题描述】：我想从 html <select> 元素中删除下拉箭头。例如：
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
在 Opera、Firefox 和 Internet Explorer 中如何操作？
【问题讨论】：
一些将其隐藏在 Firefox 中的答案/技巧 - ***.com/questions/5912791/… appearance#slectType -webkit-appearance: none; appearance: none /*menulist*/ !important; max-width: 300px; line-height: 0px; input[type='text'], select max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/ button:hover color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5; #errorMSGz-index: 2147483647; 浏览[CH:-webkit, FF:-moz, IE:-ms, Oprea:-o];
Remove Select arrow on IE的可能重复
HTML hide Select drop down arrow with css的可能重复
【参考方案1】：
如果你使用TailwindCSS
您可以利用 appearance-none 类。
<select class="appearance-none">
<option>Yes</option>
<option>No</option>
<option>Maybe</option>
</select>
【讨论】：
【参考方案2】：就我而言（在最新的 Mozilla 版本 94.0.2 上），
select
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
不起作用，但在检查 css 后我找到了解决方案：
箭头包含在background-image 中，所以我通过添加background-image: none; 解决了它
我建议使用所有规则
select
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-image: none;
【讨论】：
【参考方案3】：前面提到的解决方案适用于 chrome，但不适用于 Firefox。
我找到了一个Solution，它在 Chrome 和 Firefox 中都能很好地工作（不是在 IE 上）。将以下属性添加到您的 SELECT 元素的 CSS 并调整 margin-top 以满足您的需要。
select
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>【讨论】：
这个技巧在 Firefox 版本 31 上停止工作（在 2014 年 5 月的 Nightly 版本中）。让我们看看同时可以做些什么。我写的这个要点有完整的内幕：gist.github.com/joaocunha/6273016 Joäo Cunha 的方法检查并成功使用。看的时候别忘了在firefox里打开链接！ 它对我有用。我想将它用于 wkhtmltopdf 以从 html 生成 pdf。谢谢 text-indent 仅影响活动选项，而 padding-left 影响所选选项和下拉菜单中的选项，这看起来更清晰 IMO。如果您只是想删除箭头，我认为不需要文本溢出。【参考方案4】：无需破解或溢出。 IE上的下拉箭头有一个伪元素：
select::-ms-expand
display: none;
【讨论】：
因为问题是如何删除 IE 中的下拉箭头。 IE9 没有此功能，但在 IE10 中有效。因此，除非您使用的是 Windows XP，否则无论如何您都应该使用 IE10。 IE11 差不多了。另一个选项是一个丑陋的 CSS hack 来隐藏实际的下拉按钮并自己制作。 link 这是隐藏溢出的丑陋技巧 在 IE11 中工作。谢谢！ 这在 Firefox 中不起作用。在 Firefox 中使用 Varun Rathore 的解决方案。 这仅适用于 IE。当然它不会在 Firefox 中工作。【参考方案5】：从选择中删除下拉箭头的简单方法
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>【讨论】：
我刚刚将appearance: none 用于 Chrome 和 Firefox Quantum（v59 及更高版本）。 IE。 不再需要vendor prefixes了。
@Cphpython 截至此评论的大多数浏览器仍然有一个“部分支持前缀”标签......
@CPHPython 您需要在您的项目中安装Autoprefixer 才能使无前缀的appearance: none 工作。大多数浏览器仍然需要前缀。
@DanielTonon 哦，也许我正在使用一些类似的 postcss 包。我不记得确切，但我想我在评论之前检查了浏览器的检查器。
这应该是公认的答案，因为它实际上回答了问题:-)【参考方案6】：
正如我在Remove Select arrow on IE 中回答的那样
如果你想使用类和伪类：
.simple-control 是你的 CSS 类
: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;
【讨论】：
【参考方案7】：适用于所有浏览器和所有版本：
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
<select class="first" id="first">
<option>option1</option>
<option>option2</option>
<option>option3</option>
</select>
【讨论】：
【参考方案8】：试试这个对我有用，
<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>你不能隐藏，但使用溢出隐藏你实际上可以让它消失。
【讨论】：
【参考方案9】：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;
【讨论】：
【参考方案10】：有一个名为 DropKick.js 的库，它用 HTML/CSS 替换了普通的选择下拉菜单，因此您可以使用 javascript 完全设置和控制它们的样式。 http://dropkickjs.com/
【讨论】：
【参考方案11】：只是想完成线程。 很明显，这在 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;
【讨论】：
【参考方案12】：试试这个：
HTML：
<div class="customselect">
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</div>
CSS：
.customselect
width: 70px;
overflow: hidden;
.customselect select
width: 100px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
【讨论】：
【参考方案13】：试试这个：
select
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 2px 30px 2px 2px;
border: none;
JS斌：http://jsbin.com/aniyu4/2/edit
如果您使用 Internet Explorer：
select
overflow:hidden;
width: 120%;
或者你可以使用 Choosen : http://harvesthq.github.io/chosen/
【讨论】：
你在 IE 和 Firefox 中测试过your JSBin 吗？我仍然可以在两者中看到内置的下拉箭头。 用Choosen检查，我认为这是最好的选择。 “如果您使用 Internet Explorer”？您需要考虑使用 IE 并满足他们的大部分人口，无论如何 我们网站的用户统计如下：5.21% IE 或 2.37% Edge “如果你使用 IE”是正确的，它更适合说“如果你需要支持 IE”，但在这个时代，你的技术应该适当地针对你的受众，如果您正在运行一个以 Web 开发人员为目标的网站，那么我怀疑您是否需要支持任何版本的 IE。【参考方案14】：您无法通过功能齐全的跨浏览器支持来做到这一点。
尝试采用 50 像素的 div 并在此右侧浮动您选择的所需下拉图标
现在在该 div 中，添加宽度为 55 像素的选择标记（可能大于容器的宽度）
我想你会得到你想要的。
如果您不想在右侧放置任何下拉图标，只需执行所有步骤，除了浮动右侧的图像。将 outline:0 设置为选择标签的焦点。就是这样
【讨论】：
我无法从这些提示中获得任何帮助。有人可以在这里给出足够的代码吗？谢谢。以上是关于如何从下拉列表（选择元素）中删除默认箭头图标？的主要内容，如果未能解决你的问题，请参考以下文章