Browser (Webkit, IE, Firefox) Change the background for selection

Question

I am trying to get rid of the default gradient background on a website. I know if I installed -webkit-appereance: none of them would be possible, but then I will lose the arrows and other behaviors in the drop-down list that I want. Is there a way to set the background to white using -webkit-out: 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 usually used for two things:

• Imitation of the natural style of other elements
• OR delete all your own styles (the appearance of the installation is missing)

This is a rather strange property.

Since you want to remove the default background background, you need to set the appearance to none. This will remove the all style (gradients and arrow icons by default). However, this is not a big deal, since you can just use css to apply more styles to it.

With 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 in Chrome, Safari, and Firefox, I would probably go a different route and either use my own selection style or use a drop-down component that you have full control over.