Select default arrow doesn't hide on FF

Question

I'm trying to stylize a select but i've got problems on FF and IE8. The default arrow on the right doesn't want to disappear!!

I've made a fiddle:

http://jsfiddle.net/wa718rv8/

And here's the code:

HTML:

<div class="styled-select">
            <select name="yearpicker" id="yearpicker"></select>
          </div>

CSS:

body {
    background: red
}
.styled-select select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-indent: 0.5px;
    text-overflow: '';
    margin-left: 10px;
    margin-top: 30px;
    width: 215px;
    height: 39px;
    padding-left:10px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    color:#B4D234;
    font-size: 20px;
    overflow: hidden;
    background: transparent;
    background: url('http://www.francescoceccarelli.net/select_arrow.png') no-repeat right #fff;

}
select::-ms-expand {
    display: none;
}

and JS:

for (i = new Date().getFullYear(); i > 2000; i--)
{
    $('#yearpicker').append($('<option />').val(i).html("Year " + i));
}

Can you give some suggestion, please?

Thx, Francesco

You cannot style select boxes in IE8. If you're dead set on having styled select boxes, your best course of action would be to use divs instead of select options and then use Javascript to make the divs act like a select box. If that's above your skill level, there's a jQuery plugin that will do it for you called [Selectify](https://github.com/jamesinc/selectify) — APAD1, Oct 09 '14 at 17:01
This is a known issue in the latest firefox. There used to be a hacky way to get around by offsetting content: ' ' a little bit, you can learn more here: http://stackoverflow.com/questions/23920990/firefox-30-is-not-hiding-select-box-arrows-anymore & you can look at the bug ticket here: https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c161 — Mathias Rechtzigel, Oct 09 '14 at 17:06

score 0 · Accepted Answer · answered Oct 09 '14 at 17:17

what you can do is set -moz-appearance: window which will wipe all of the default styling. Then you can wrap the select in a container (which you have already), and style the container to look like your select box and then make the select inside the full height and width of the container so that clicking on it still triggers the action.

JSFIDDLE

Select default arrow doesn't hide on FF

1 Answers1