选择箭头样式更改
我正在尝试用自己的图片替换选择箭头。我将SELECT包含在具有相同大小的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>
炎炎设计3回答
-
拉丁的传说
您是否尝试过以下方法：.styled-select select { -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none;}尚未测试，但应该可以。编辑：看来Firefox在版本35之前不支持此功能（在此处了解更多信息）
随时随地看视频慕课网APP
Html/CSS