How to change the background color(on hover) and css(height/width) of a select option?

Question

Hi I am a Web Graphic Designer and want to change the CSS of the select option (height/width) and other valid options in Open Cart and Want to change the color of background of the select option on Hover.

 <select id="currencybox">
    <option selected="selected" id="IND">
        <span class="WebRupee"> Rs. </span>Indian Rupees
    </option>
    <option value="USD" id="USD">
        $ USD                 
    </option>
</select>

Please help as soon as possible. THe options are coming from the currency module(on the home page and other). THanks

I want to beautify the select option and the default value selected boxes... — Kusumakar Pant, Oct 21 '14 at 08:02
possible duplicate of [Change Select List Option background colour on hover](http://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover) — doppelgreener, May 01 '15 at 07:23

score 0 · Accepted Answer · answered Oct 21 '14 at 08:16

0

try using:

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

They will remove the default behavior of select option.
Fiddle

answered Oct 21 '14 at 08:16

vusan

4,921
4
39
79

How to modify the dropdown arrow sign or modify the options – Kusumakar Pant Oct 21 '14 at 09:12
For dropdown see [Fiddle1](http://jsfiddle.net/vusan/1g7dy0sq/1/). There is no arrow. But once you [include font](http://stackoverflow.com/questions/13820963/how-to-add-font-to-a-web-page/13821033#13821033) and added to the font-family, you will get the arrow. – vusan Oct 21 '14 at 10:01

How to change the background color(on hover) and css(height/width) of a select option?

1 Answers1