2

How can I remove the drop down arrow normally displayed by FireFox? I have uploaded an image of what I am working with below:

enter image description here

I am using this css:

@-moz-document url-prefix(){
  .class select { width: 110%; }
}

.class > select {
    -moz-appearance: none !important;
    text-indent: 0.01px !important;
    text-overflow: "" !important;
}

Please help me to solve this issue.

BuddhistBeast
  • 2,652
  • 2
  • 21
  • 29
The K
  • 59
  • 7
  • http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox - Possible duplicate? – BuddhistBeast Jul 12 '14 at 06:15
  • Or you can read the comments on this page as well: https://gist.github.com/joaocunha/6273016 – BuddhistBeast Jul 12 '14 at 06:17
  • i have use this http://stackoverflow.com/questions/5912791/how-to-remove-the-arrow-from-a-select-tag-in-firefox code but it is not working. – The K Jul 12 '14 at 06:18
  • There used to be a commonly used [fix](http://stackoverflow.com/questions/6787667/what-is-the-correct-moz-appearance-value-to-hide-dropdown-arrow-of-a-select) which worked well until it stopped working overnight since Mozilla 30.0, I've been stranded by this ever since. – Samy S.Rathore Jul 12 '14 at 06:22

2 Answers2

0

It is not possible that way. Best way is to fake it and create your own customized <select>.

Have a look at this fiddle I created http://jsfiddle.net/JayKandari/FWLRw/5/

JayKandari
  • 1,228
  • 4
  • 16
  • 33
0

This trick stopped working as of Firefox 30 realeased in 2014-06-10. You can upvote the bug on Bugzilla for a definitive fix.

Option 1: Remove the custom styles on Firefox only through a url-prefix media query, like:

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

Option 2:

Here is a solution

Carlos Blanco
  • 26
  • 5