选择箭头样式更改
我试图用我自己的照片替换选择的箭头。 我在包含相同大小的div中选择，我将选择的背景设置为透明，并且在div的右上角包含一张图片（与箭头大小相同）作为背景。
它只适用于Chrome。
我如何使它在Firefox和IE9中工作，我得到这个：
.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;
}<HTML>
<HEAD>
</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 {
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari and Chrome */
appearance:none;
}
没有测试过，但应该工作。
编辑 ：它看起来像Firefox直到版本35不支持此功能（请阅读更多此处）
这里有一个解决方法，看看这个帖子上的jsfiddle 。
这是一个使用跨度显示值的优雅修复程序。
布局是这样的：
<div class="selectDiv">
<span class="selectDefault"></span>
<select name="txtCountry" class="selectBox">
<option class="defualt-text">-- Select Country --</option>
<option value="1">Abkhazia</option>
<option value="2">Afghanistan</option>
</select>
</div>
的jsfiddle
仅使用一个课程：
select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 244px;
}
http://jsfiddle.net/qhCsJ/4120/
链接地址: http://www.djcxy.com/p/41617.html