css – 选择箭头样式更改

我试图替换一个选择的箭头与我自己的图片。我将选择包含在相同大小的div中，我将选择的背景设置为透明，我在div的右上角包含一个图片(与箭头相同的大小)作为背景。

它只能在Chrome中使用。

我如何使它在Firefox和IE9的工作在我得到这个：

<HTML>
<HEAD>

<style type="text/css">
.styled-select {
   width: 100px;
   height: 17px;
   overflow: hidden;
   overflow: -moz-hidden-unscrollable;
   background: url(images/downarrow_blue.png) no-repeat right white;
   border: 2px double red;
   display: inline-block;
   position:relative;
   }

.styled-select select {
   background: transparent;
   -webkit-appearance: none;
   width: 100px;
   font-size: 11px;
   border: 0;
   height: 17px;
   position: absolute;
   left: 0;
   top: 0;
   }

body {  background-color:#333333;color: #FFFFFF;}
.block label{   color:white;    }

</style>
</HEAD>

<BODY>

<p/>
<form action="/prepareUpdateCategoryList.do?forwardto=search">

<fieldset class="block"  id="searchBlock">
<p>
<label style="width:80px">Class</label>
<div class="styled-select">
    <select property="voucherCategoryClass" >
        <option value="0">Select </option>
        <option value="7382">steam </option>
    </select>
</div>

</p>
</fieldset>
</form>
</BODY>
</HTML>

解决方法

你试过这样的事情：

.styled-select select {
    appearance:none;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
}

没有测试，但应该工作。

编辑：看起来Firefox仍然不支持此功能(read more here)

我找到一个解决方法 here，看看jsfiddle的那个帖子。

css – 选择箭头样式更改

解决方法

相关文章