Browser (Webkit, IE, Firefox) Change background for select

7

I have been trying to get rid of the default gradient background in Website. I know if I set the -webkit-appereance:none this would be possible but then I will lose the arrows and other behaviors in the dropdown that I want. Is there anyway of setting the background to white with the -webkit-appearance: menulist ?

This is what I have but the background does not change

.ius select{
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    height:32px;
    border:1px solid #c8c8c8;
    width:250px;
    background:rgba(255, 255, 255, 0);
    background: transparent;
}

Faz Ya

Posted 2013-08-03T23:03:41.737

Reputation: 695

Do you have an example? I'm not sure I understand your question. – putvande – 2013-08-03T23:06:47.667

I don't think it's possible to replace just the background without getting rid of a select's other features. You could always use a jQuery plugin like msDropDown to style a select however you want. – eclipsis – 2013-08-03T23:35:36.573

Answers

5

The appearance property is generally used for two things:

  1. Mimicking the native styling of other elements
  2. OR removing all native styling (setting appearance to none)

It's a pretty weird property.

Since you want to remove the native default background, you need to set appearance to none. This will remove all styling (the gradients and the default arrow icons). This isn't a big deal however, since you can just use css to apply more styling to it.

With the markup:

<select id="menulist">
    <option value="one">One</option>
    <option value="two">Two</option>
    <option value="three">Three</option>
</select>

And CSS:

#menulist {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height:20px;
    border:1px solid rgb(156,156,156);
    width:250px;
    text-indent: 8px;
    /**
    * replace this background url with a proper arrow asset
    **/
    background: url('http://placehold.it/5x10') no-repeat 95% 50%;
}

The full jsfiddle is available here: http://jsfiddle.net/gwwar/vR53Q/2/

Since this property is only supported on Chrome, Safari and Firefox, I would probably go a different route and either use the native select styling or use a dropdown component that you have full control over.

Kerry Liu

Posted 2013-08-03T23:03:41.737

Reputation: 1 792

This solution doesn't work with Firefox. The browser renders its own dropdown on top of the background image. – Faz Ya – 2013-08-06T23:51:39.043

It looks like there are 2 FF bugs related to this: https://bugzilla.mozilla.org/show_bug.cgi?id=649849 and https://bugzilla.mozilla.org/show_bug.cgi?id=605985 You can however, push the arrow out of the way using text-indent. It does look weird though, and you should ideally just not use the appearance property and create your own component instead.

– Kerry Liu – 2013-08-11T19:24:04.780

1FYI: I was able to use unicode ▲ and ▼ positioned on top of each other (instead of a background image) to recreate the arrows. I did this in a <label> tag positioned on left side of the <select>. Thought this might help. – Jonathan Cross – 2016-01-14T15:09:33.920

It works!!! Thank You – Immran Mohammed – 2017-03-16T15:11:07.497