select element arrow can be hidden on chrome but not firefox

Asked Aug 05 '14 at 15:19

Active Aug 05 '14 at 16:02

Viewed 27 times

Note: This Question is not a duplicate because the answers in the older questions do not work on FireFox 30.00 and up!
I am using the CSS below to replace the arrow of the select item and it's style. It works on Chrome but on FireFox 30 and above it looks like this:
enter image description here
Here is my CSS:

select { 
-webkit-appearance: none; 
-moz-appearance: none !important; 
appearance: none !important; 
padding: 2px 30px 2px 2px; 
border: none; 
background: transparent url(../images/select.gif) no-repeat left center; 
}

Jsfiddle
Can i remove the arrow?

edited Aug 05 '14 at 16:02

Jacob G

13,762
3
47
67

asked Aug 05 '14 at 15:19

jq beginner

1,010
3
21
41

that answer didn't work you had to check out before marking question as duplicated – jq beginner Aug 05 '14 at 15:23
Be explicit about Firefox versions if you can. – Dave Schweisguth Aug 05 '14 at 15:42
@jqbeginner, See this SO question on your problem: http://stackoverflow.com/questions/23680116/how-can-i-hide-a-select-arrow-in-firefox-30 – Jacob G Aug 05 '14 at 16:03
And this post about it is also helpful:http://www.currelis.com/hiding-select-arrow-firefox-30.html – Jacob G Aug 05 '14 at 16:08

select element arrow can be hidden on chrome but not firefox

0 Answers0