change background color of option element in select

Question

i have a select dropdown, which has options element and div with emoji dynamically added to it. It looks something like this

<select class="items-dropdown">
<option class="each-item">Lang1 <div>Emoji here</div></option>
<option class="each-item">Lang2<div>Emoji here</div></option>
</select>

I'm trying to change the background color of option element when hovered , tried option:hover{background-color:} and also tried solutions in the Change Select List Option background colour on hover

Those solutions didn't work either. can someone suggest the workaround? should I switch to ul and li style on dropdown ? I'm unable to style <div> also

I guess this answer might help you https://stackoverflow.com/a/12836286/11352456 — Rose Riyadh, Aug 05 '21 at 06:40
@RoseRiyadh this doesn't meet the "on hover" requirement though — Constantin Groß, Aug 05 '21 at 06:42

score 0 · Answer 1 · answered Aug 05 '21 at 07:14

0

this comment is doing the hover section https://stackoverflow.com/a/60073662/11352456

I think it's satisfy your requirement.

answered Aug 05 '21 at 07:14

Rose Riyadh

518
6
16

change background color of option element in select

1 Answers1