How to remove the arrow from a select element in F

Question

I'm trying to style a select element using CSS3. I'm getting the results I desire in WebKit (Chrome / Safari), but Firefox isn't playing nicely (I'm not even bothering with IE). I'm using the CSS3 appearance property, but for some reason I can't shake the drop-down icon out of Firefox.

Here's an example of what I'm doing: http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

As you can see, I'm not trying for anything fancy. I just want to remove the default styles and add in my own drop-down arrow. Like I said, great in WebKit, not great in Firefox. Apparently, the -moz-appearance: none doesn't get rid of the drop-down item.

Any ideas? No, JavaScript is not an option

Answer 1

While not a complete solution I've found that…

-moz-appearance: window;

…works to some extent. You can't change the background (-color or -image) but the element can be rendered invisible with color: transparent. Not perfect but it's a start and you don't need to replace the system level element with a js one.

Answer 2

Use the pointer-events property.

The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it. [see this post]

Here is a working FIDDLE using this method.

Also, in this SO answer I discussed this and another method in greater detail.

Answer 3

Since Firefox 35, "-moz-appearance:none" that you already wrote in your code, finally remove arrow button as desired.

It was a bug solved since that version.

Answer 4

This works (tested on Firefox 23.0.1):

select {
    -moz-appearance: radio-container;
}

Answer 5

It's a huge hack, but -moz-appearance: menulist-text might do the trick.

Answer 6

A lot of Discussions Happening here & there but I don't see some proper solution for this problem. Finally Ended up by writing a small Jquery + CSS code for doing this HACK on IE & Firefox.

Calculate Element Width (SELECT Element) using Jquery. Add a Wrapper Around Select Element and Keep overflow hidden for this element. Make sure that Width of this wrapper is appox. 25px less as that of SELECT Element. This could be easily done with Jquery. So Now Our Icon is Gone..! and it is time for adding our image icon on SELECT element...!!! Just add few simple lines for adding background and you are all Done..!! Make sure to use overflow hidden for outer wrapper,

Here is a Sample of Code which was done for Drupal. However could be used for others also by removing few lines of code which is Drupal Specific.

/*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);

/*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

Solution works on All Browsers IE, Chrome & Firefox No need of Adding fixed Widths Hacks Using CSS. It is all being handled Dynamically using JQuery.!

More Described at:- http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css