How to change the background color of the dropdown options on mouse over?

Question

I have the following drop down list:

<asp:DropDownList ID="ddlSubdivision" AppendDataBoundItems="true"
runat="server" Height="30px" Width="450px" AutoPostBack="True"
OnSelectedIndexChanged="SubDivision_Changed" CssClass="dropdown"
OnClick ="">

In this dropdown list, I want to change the color of the options on mouse over. By default, in Chrome it shows up as Blue, but I want to change it to red.

I have tried the following CSS code:

   .dropdown {
  position: relative;
  display: inline-block;
}

option::selection {
  background: #ffb7b7; /* WebKit/Blink Browsers */
}

But this does not seem to work. How to achieve the required functionality?

Styling dropdowns is very limited, it's usually best to use a plugin to create a html list so you can style that instead - [see this question](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element). If you scroll down, there is [an answer](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element#answer-28466918) that shows some plugins you can use — Pete, Dec 10 '19 at 14:03

score 0 · Answer 1 · answered Dec 10 '19 at 13:58

0

You can try with:

!important

option:: selection { background: #ffb7b7 !important;}

answered Dec 10 '19 at 13:58

Mickael Lherminez

679
1
10
29

No, this does not work :( Still the same blue color – Ashesh Das Dec 10 '19 at 14:07
If it does not work, I do not know. There is also ```!veryimportant``` which precedes ```!important```, but I do not think that will solve your problem. – Mickael Lherminez Dec 10 '19 at 14:18

How to change the background color of the dropdown options on mouse over?

1 Answers1