<select> drop arrow doesn't want to go out the container - css

Question

I'm trying to find a workaround (without using JS) for the firefox bug which doesn't allow to style Firefox dropdown arrow in select elements. Some people say it could be done by putting a select element in a container and setting the container's width to be smaller than the select's. Somehow it just doesn't work for me, even when I set the select element's width to 100000px (the arrow is still there on the max. right position).
http://jsfiddle.net/qQ829/ here is the jsFiddle
CSS:
#nav {
background: url("http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg") no-repeat scroll right center #DDDDDD;
border: 1px solid #CCCCCC;
height: 34px;
overflow: hidden;
max-width: 800px;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border: 1px solid #1C2149;
background: #a7cfdf; /* Old browsers */
background: -moz-linear-gradient(top, #a7cfdf 0%, #1a80b6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#1a80b6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a7cfdf 0%,#1a80b6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a7cfdf 0%,#1a80b6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a7cfdf 0%,#1a80b6 100%); /* IE10+ */
background: linear-gradient(to bottom, #a7cfdf 0%,#1a80b6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#1a80b6',GradientType=0 ); /* IE6-9 */
}
#nav select {
background: transparent;
width: 830px!important;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
color: white;
font-family: "Open Sans",Arial,Helvetica,sans-serif !important;
}
// EDIT
Additional HTML code:
<nav class="nav-holder" id="nav">
<select>
<option selected="selected" value="">Go to...</option>
</select>
</nav>

Answer 1

add overflow to you css.
#nav select {
background: transparent;
/*width: 830px!important;*/
width:110%;
overflow:hidden;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
color: white;
font-family: "Open Sans",Arial,Helvetica,sans-serif !important;
}
and set the width to 110% as well otherwise you have that long bar

Answer 2

Try with -moz-appearance: window; . It removes all the style of the select (borders and arrow).
You can see it in action here.
Edit: Only for Mac, not for WinXP.

Answer 3

Forget the container, this is how to hide the select arrow on Firefox:
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Live example: http://jsfiddle.net/joaocunha/RUEbp/1/
Whole explanation (worth checking): https://gist.github.com/joaocunha/6273016