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

i'm trying find workaround (without using js) firefox bug doesn't allow style firefox dropdown arrow in select elements. people done putting select element in container , setting container's width smaller select's. somehow doesn't work me, when set select element's width 100000px (the arrow still there on max. right position).

http://jsfiddle.net/qq829/ here 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> 

add overflow 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 width 110% otherwise have long bar