[英]IE9 Double drop down issue
Customize image was added to the select box, every browser it was displaying fine except in IE9. 自定义图像已添加到选择框,除IE9外,它的每个浏览器都显示良好。 I can see two arrows one is customized arrow image and another drop down Icon.
我可以看到两个箭头,一个是自定义箭头图像,另一个是下拉图标。 How can i remove that Drop down Icon that come on IE9.
我如何删除IE9上的那个下拉图标。 Please help me if any one knows.
如果有人知道,请帮助我。
.dropdown {
height: 90px;
overflow: hidden;
background: url(../images\valdropdown.png) no-repeat right;
background-size: 10% 100%;
position:relative;
display:inline-block;
}
.dropdown select {
background: transparent;
-o-appearance:none;
-prefix-appearance: none;
-ms-box-sizing:content-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
appearance:none
padding:5px;
font-size: 16px;
line-height: 1;
border: none;
border-radius: 0;
height: 50px;
z-index: -1;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
It can be done something like this. 可以这样做。 Fiddle here
在这里摆弄
In example, a fixed width set on select
and wrap a div with a lower width and overflow:hidden
in order to mask/hide the dropdown. 例如,在
select
设置了固定宽度,并用较低的宽度和div覆盖了div并overflow:hidden
了它,以掩盖/隐藏下拉菜单。 It has full support and essentially does hide the arrow in all browsers. 它具有全面的支持,并且实际上在所有浏览器中都隐藏了箭头。
HTML 的HTML
<div>
<select>
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</div>
CSS 的CSS
div {
width: 80px;
overflow: hidden;
border: 1px solid black;
}
select {
width: 100px;
border: 0px;
}
OR with pure CSS
或使用纯
CSS
select::-ms-expand {
display: none;
}
OR with jQuery
selectbox replacement. 或与
jQuery
selectbox替换。
It's a jQuery plugin. 这是一个jQuery插件。
jQuery selectbox plugin jQuery selectbox插件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.