Why Does Firefox Set a Background Color on the Select Arrow Button When I Set a Custom Border or Background Color

Why does Firefox set a background color on the select arrow button when I set a custom border or background color?

To start with, styling form elements is extremely complicated and troublesome. Some progress has been made lately, but behaviour is inconsistent from browser to browser. The problem comes from the way browser have historically handled form elements (letting the OS decide the element appearance).

Now to your question: for some reason, whenever you modify FF default stylesheet, the browser applies a different style to the dropdown (this may be a bug, a bad implementation or planned behaviour, but it's clearly annoying).

One solution would be to get rid of all the "chrome" altogether, using a vendor property -x-appearance: none, like this:

select {
  border: 1px solid silver;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 25px;
  background: url(data:image/gif;base64,R0lGODlhCwALAJEAAAAAAP///xUVFf///yH5BAEAAAMALAAAAAALAAsAAAIPnI+py+0/hJzz0IruwjsVADs=);
  background-repeat: no-repeat;
  background-position: 95% 42%;
}

Note that you have to re-apply the down arrow (I did this by inserting an image as a background, encoded in base64.) You can use any image of your liking.

The problem with this approach is that it doesn't work in IE: http://caniuse.com/#search=appearance

Here you have a Fiddle to test it: https://jsfiddle.net/81L844p4/4/

Hope it helps.

Select arrow style change

Have you tried something like this:

.styled-select select {
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

Haven't tested, but should work.

EDIT: It looks like Firefox doesn't support this feature up until version 35 (read more here)

There is a workaround here, take a look at jsfiddle on that post.

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.

Bad dropdown arrow styling on firefox and safari

You should reset default styling and add your custom style that is uniform across browsers. This below snippet should help

select{
  box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.7);
  border-radius: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  padding-right: 1rem;
  padding-left: 0.5rem;
  border: 0;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat, repeat;
  background-position: right .7em top 50%;
  background-size: .65em auto;
}

<select type="dropdown">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

How can I change the border color on my select element without effecting bootstrap css styling?

Bootstrap actually comes with validation CSS built in. The style of the select in bootstrap is different to what you have in your question so it may not be to your liking. It does however keep the select arrow consistent unlike what you currently have.
See https://getbootstrap.com/docs/5.0/forms/validation/ for details

Here is a working fiddle: https://jsfiddle.net/0gqL7641/1/

The advantage of using this is that when you choose an option it changes from red to green.

If the above is unacceptable to you, then the following will work:

You can use outline instead of border and this doesn't change the styling of select

this.style.outline = "solid 1px red";

Another way of changing the outline without touching border is to use shadow

.redOutline {
    -webkit-box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5); 
    box-shadow: 0px 0px 3px 3px rgba(255,0,0,0.5);
}

and use the following to add the outline

this.classList.add("redOutline");

You can tweak the shadow CSS using this tool https://html-css-js.com/css/generator/box-shadow/

Styling a select element in Firefox

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.

Change HTML Select arrow background color

Some linear-gradient background-image hacks:

select {
  /* styling */
  background-color: black;
  color: white;
  line-height: 1.5em;
  padding: 0.5em 3.5em 0.5em 1em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
}

select.classic {
  background-image: linear-gradient(45deg, transparent 50%, white 50%), linear-gradient(135deg, white 50%, transparent 50%), linear-gradient(to right, black, black);
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
}

<select class="classic">
  <option>Option</option>
  <option>Option</option>
  <option>Option</option>
</select>

set background of select tag same on parent div's background

Your code works in Firefox, but doesn't work in IE (you should have specified this in the question, TBH).

Instead of trying to uniform the way each browser paint the box around the second background image, the Egg of Columbus is to set the background transparent:

select {
  background : transparent;
      border : none;
       color : white;
}

Demo

What is the correct -moz-appearance value to hide dropdown arrow of a select element

This is it guys! FIXED!

---

Wait and see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

or workaround

---

For those wondering:

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

First, because the bug has a lot of hostile spam in it, it creates a hostile workplace for anyone who gets assigned to this.

Secondly, the person who has the ability to do this (which includes rewriting ) has been allocated to another project (b2g) for the time being and wont have time until that project get nearer to completion.

Third, even when that person has the time again, there is no guarantee that this will be a priority because, despite webkit having this, it breaks the spec for how is supposed to work (This is what I was told, I do not personally know the spec)

Now see https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)

---

The page no longer exists and the bug hasn't be fixed but an acceptable workaround came from João Cunha, you guys can thank him for now!

---

Related Topics