我正在尝试创建一个自定义的下拉菜单控件,我需要从本机控件隐藏箭头。我正在使用以下CSS,它适用于Chrome和Safari,但不适用于Mozilla和IE。
select.desktopDropDown { appearance: none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ }
这是一个[jsfiddle] [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来说应该对你有好处。