user1802439 user1802439 - 1 year ago 290
CSS Question

select arrow style change

I'm trying to replace the arrow of a select with a picture of my own. I'm including the select in a div with the same size, I set the background of the select as transparent and I'm including a picture(with the same size as the arrow) in the right top corner of the div as background.

It only works in Chrome. enter image description here

How can I make it work in Firefox and IE9 where I'm getting this: enter image description here

<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>

Answer Source

Have you tried something like this:

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

Haven't tested, but should work.

EDIT: It looks like Firefox still doesn't support this feature(read more here)

I have found a workaround here, take a look at jsfiddle on that post.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download