Question

我创建了一个自定义下拉菜单，其中图片为箭头而非默认箭头。它在chrome中工作正常但我无法隐藏firefox和IE8及以上浏览器中的默认下拉箭头。

这是我的代码。

<body bgcolor="#f2f2f2">
<div id="list_textA">I want to select a</div>
        <select name="mydropdown" class="dropdown">
            <option value="listItemA">Predefined</option>
            <option value="listItemB">Custom</option>
        </select>
<div  id="list_textB">profile</div>   
<style>
.dropdown {
border: none;
background-image: url(image.png);
background-repeat: no-repeat;
background-position: right 10px center, left 10px center;
padding-right:75px;
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
background-color:#f2f2f2;
color:#067ab4;
display:inline-block;
 } 
.dropdown{line-height:40px;color:#067ab4;font:36px omnes_attregular;display:inline-block;margin-top:45px;}
div#list_textA{line-height:40px;display:inline-block;font:36px omnes_attregular;padding-left:10px;margin-top:0px;color:#444444;}
div#list_textB{line-height:40px;display:inline-block;font:36px omnes_attregular;margin-top:45px;color:#444444;}
 </style>
 </body>

Answer 1

不幸的是，选择元素无法在浏览器中一致地设置样式。我知道如何完全控制样式的唯一方法是隐藏选择并使用div和javascript模拟它。

幸运的是，我们所有人都将这个过程变成了一个jQuery插件：http://harvesthq.github.io/chosen/

选择是我的最爱，但我确信那里还有其他人。

无法隐藏firefox和IE8及以上浏览器中的默认下拉箭头

1 个答案: