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

Question

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;
}

Answer 1

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.