CSS inline svg background in select with firefox

Question

I am building a custom select tag with an inline svg background using -webkit-appearance: none in my css.

select {
    font-size: 30px;
    border: 1px solid lightblue;
    border-radius: 10px;
    color: black;
    padding: 12px;
    width: 300px;
    -webkit-appearance: none;

    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50px' height='50px'><polyline points='46.139,15.518 25.166,36.49 4.193,15.519'/></svg>") right no-repeat;

    background-color: lightblue;
    background-transparency: 0.5;
    background-position: right 15px top 22px;
    background-size: 18px 18px;
}

It does not work in firefox (obviously).

What is the equivalent of -webkit-appearance: none in firefox to get it to work ?

Thank you in advance

…But it works already in my firefox (= same result as in webkit) without -moz-appearance? — bwoebi, May 21 '13 at 09:22
it does not work in firefox 22. I still haver the firefox arrow in front of the svg arrow. http://jsfiddle.net/sucrenoir/yHR53/7/ — Sucrenoir, May 21 '13 at 09:28
That's weird. I tried with FirefoxNightly (24) on osx and i get this : https://dl.dropbox.com/s/zj40n2zjoa0e07t/2013-05-21_at_15.08.43.png — Sucrenoir, May 21 '13 at 13:09

score 2 · Answer 1 · answered May 21 '13 at 09:29

2

Unfortunately the answer is no at the moment.

According to MDN doc, it's not recommended to use it now as it's buggy.

answered May 21 '13 at 09:29

shinnc

899
7
16

Yes right. Maybe i should try another solution... and i found another solution : http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox – Sucrenoir May 21 '13 at 13:26
1

With text-indent, i get something passable on both browsers. http://jsfiddle.net/sucrenoir/yHR53/11/ Thx :-) – Sucrenoir May 21 '13 at 13:59

score 1 · Answer 2 · answered May 21 '13 at 09:22

1

Should use -moz-appearance: none; for Firefox to work.

answered May 21 '13 at 09:22

Nitesh

15,425
4
48
60

score 0 · Answer 3 · answered Feb 04 '14 at 19:40

0

Another way is to use:

@-moz-document url-prefix() {
    select {
        background: lightblue; 
    }
}

answered Feb 04 '14 at 19:40

pinder

51
2

CSS inline svg background in select with firefox

3 Answers3