Select Box Issue in Updated Firefox

Before:

After:

First we need to surround our select box element with a div container:


<div>
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>


Next we need to add CSS to make sure that the elements of the select box are styled a certain way:

CSS :
.outer-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}


We need to make sure that our select box actually spans wider than the surrounding div container so that the default drop down arrow disappears.

Our div container needs to be styled like so in order for the new arrow to appear where we want it to:

.outer-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.png) no-repeat right #ddd;
border: 1px solid #ccc;
}