how to change select option's height and hover background color

Question

<select name="mySelect" class="select-min">
   <option value="0">please select</option>
   <option value="1">item1</option>
   <option value="2">item2</option>
   <option value="3">item3</option>
   <option value="4">item4</option>
   <option value="5">item5</option>
</select>

I want to change the option's height and background color when mouse over the option,I tried many times ,but failed

you cannot change option height, because it's browser control. you could change background on simple :hover, but it's not visible because of browser's native hover — vergilius, Mar 13 '14 at 08:42

Jaykumar Patel · Accepted Answer · 2014-03-13T08:52:26.673

5

<select> or <option> HTML tag are rendering itself the time of webpage load. So You can not change the style for these elements.

edited Mar 13 '14 at 08:52

answered Mar 13 '14 at 08:43

Jaykumar Patel

26,836
12
74
76

Naveen Chandra Tiwari · Answer 2 · 2014-03-13T09:58:57.617

-1

Please try this :-

 $(document).ready(function () {
    $(".select-min option").mouseover(function () {
      $(this).css({ "background-color": "black", "color": "white", "height": "32"});
    });

    $(".select-min option").mouseout(function () {
      $(this).css({ "background-color": "white", "color": "black", "height": "5" });
    });
 });

Let me know if it doesn't work.

edited Mar 13 '14 at 09:58

answered Mar 13 '14 at 09:00

Naveen Chandra Tiwari

5,055
3
20
26

score -3 · Answer 3 · answered Mar 13 '14 at 08:43

-3

For the Height, i don't think it's possible. For the hover:

select:hover { background-color: blue; }

answered Mar 13 '14 at 08:43

Mazeltov

541
5
18

how to change select option's height and hover background color

3 Answers3