IE & Firefox - 自定义下拉菜单无法移除原生箭头
Posted
技术标签:
【中文标题】IE & Firefox - 自定义下拉菜单无法移除原生箭头【英文标题】:IE & Firefox - custom drop down could not remove native arrows 【发布时间】:2013-08-28 16:48:25 【问题描述】:我正在尝试创建一个自定义下拉控件,我需要从本机控件中隐藏箭头。我正在使用以下CSS
,它适用于 Chrome 和 Safari,但不适用于 Mozilla 和 IE。
select.desktopDropDown
appearance: none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
这是一个 [jsfiddle][1]。
【问题讨论】:
你的 IE 解决方案是什么? 如果可行,请接受最佳答案,而不是在您自己的问题中写下答案 【参考方案1】:使用它会起作用,但适用于 IE10+ 和 FF:
你的 CSS 应该是这样的:
select.desktopDropDown::-ms-expand
display: none;
更多关于::ms-expand
。
然后剩下的:
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;
注意:我将路径 "../img/assets/arrow.png"
硬编码为背景。
这在 IE、Firefox 和 Opera 中应该很适合你。
【讨论】:
请注意:第一个示例中缺少括号。 IE 11 不喜欢select.desktopDropDown :: -ms-expand
中的空格。在我做到select.desktopDropDown::-ms-expand
之前它没有用(::
周围没有空格。IE - 自 2009 年以来一直在拖钓
@ug_ 因为好的语法没有空格。因为你不能指望浏览器能理解拼错的 JS 函数,你也不能指望它能理解拼错的 CSS 指令。很简单。
bourbon.io 没有用@include appearance(none);
很好的答案 +1 来捕捉这一点【参考方案2】:
简单示例:
对于 I.E:
select::-ms-expand
display: none;
对于火狐:
select
-moz-appearance: none;
appearance: none;
text-overflow: ''; /* this is important! */
【讨论】:
【参考方案3】:对于 Fx,我使用 -moz-appearance: checkbox-container
,效果很好。
因此,将所有内容放在一起对您来说应该足够了:
select.desktopDropDown
appearance: none;
-webkit-appearance: none;
-moz-appearance: checkbox-container;
border-style: none;
select.desktopDropDown::-ms-expand
display: none;
【讨论】:
【参考方案4】:事实上,IE10+ 主要需要这个技巧,其中箭头是 Windows 8 的 Metro 风格,即使在 Windows 7 上也是如此。虽然 Windows 8 用户必须习惯这种风格,因为它是通过操作系统使用的。无论如何,我建议不要使用:
display: none;
使用方法:
visibility: hidden;
因为,至少在 IE 中,前者会导致选中项的蓝线在选择获得焦点时覆盖下拉箭头,而后者不会。
【讨论】:
【参考方案5】:我们可以使用 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>
【讨论】:
以上是关于IE & Firefox - 自定义下拉菜单无法移除原生箭头的主要内容,如果未能解决你的问题,请参考以下文章
Jetpack Compose : 一学就会的自定义下拉刷新&加载更多
Jetpack Compose : 一学就会的自定义下拉刷新&加载更多
如何禁用Chrome / Firefox /IE浏览器的Cookie
如何让firefox和chrome支持css自定义鼠标样式?IE中用“cursor:url()”属性可以实现,FF、Chrome怎么弄?