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>