How to Remove the Arrow from a Select Element in Firefox

How to remove the arrow from a select element in Firefox

Okay, I know this question is old, but 2 years down the track and mozilla have done nothing.

I've come up with a simple workaround.

This essentially strips all formatting of the select box in firefox and wraps a span element around the select box with your custom style, but should only apply to firefox.

Say this is your select menu:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

And lets assume the css class 'css-select' is:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

In firefox, this would display with the select menu, followed by the ugly firefox select arrow, followed by your nice custom looking one. Not ideal.

Now to get this going in firefox, add a span element around with the class 'css-select-moz':

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

Then fix the CSS to hide mozilla's dirty arrow with -moz-appearance:window and throw the custom arrow into the span's class 'css-select-moz', but only get it to display on mozilla, like this:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

Pretty cool for only stumbling across this bug 3 hours ago (I'm new to webdesign and completely self-taught). However, this community has indirectly provided me with so much help, I thought it was about time I give something back.

I have only tested it in firefox (mac) version 18, and then 22 (after I updated).

All feedback is welcome.

How to remove the default arrow icon from a dropdown list (select element)?

There's no need for hacks or overflow. There's a pseudo-element for the dropdown arrow on IE:

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

How to remove default arrow form select in Firefox (Firefox version 30) and IE

You can try:

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

for hiding dropdown arrow in IE and for more info.

and for firefox us can use this:

-webkit-appearance: none;
-moz-appearance: none;
 appearance: none;

see this fiddle:
see this link and link2

let me know if you still have issues with arrow

thanks

Remove Select arrow on IE

In IE9, it is possible with purely a hack as advised by @Spudley. Since you've customized height and width of the div and select, you need to change div:before css to match yours.

In case if it is IE10 then using below css3 it is possible

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

However if you're interested in jQuery plugin, try Chosen.js or you can create your own in js.

How to remove arrow from select element

1) Add a pseudo element for your custom arrow icon and position it to the right of the select element such that it overlays the default arrow.

2) Set pointer-events: none; on the pseudo element so that clicking on it doesn't hamper the drop down from opening.

DEMO

.select-style:after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 30px;
    background: #fafafa url("http://icons.iconarchive.com/icons/iconsmind/outline/128/Triangle-ArrowDown-icon.png") no-repeat 98% 4px;
    background-size: 26px 26px;
    position: absolute;
    right: 0;
    top: 0;
    pointer-events: none; /* <-- */
}

.select-style {  border: 1px solid #333;  width: auto;  height: 32px;  overflow: hidden;  position: relative;  margin: 40px;}.select-style:after {  content: '';  display: inline-block;  width: 30px;  height: 30px;  background: #fafafa url("http://icons.iconarchive.com/icons/iconsmind/outline/128/Triangle-ArrowDown-icon.png") no-repeat 98% 4px;  background-size: 26px 26px;  position: absolute;  right: 0;  top: 0;  pointer-events: none;}.select-style select {  padding: 9px 8px 0 5px;  width: 100%;  border: none;  font-size: 14px;}

<div class="select-style">
  <select>    <option value="volvo">Please select an option</option>    <option value="volvo">Volvo</option>    <option value="saab">Saab</option>    <option value="mercedes">Mercedes</option>    <option value="audi">Audi</option>  </select>