Change Select List Option Background-Color on Hover in CSS

Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). I'll help you master the latest tech here:

👉 Discord: all my courses have a private Discord where I actively participate

0:00 Solution

#webdevelopment #coding #programming

[lrw.z]

Thanks mate, I also discovered that you can also add a "Option:checked" element to change the color of the selected option insted of the blue line, also I've been facing a problem with select the moment i scroll down it selects automatically to fix that just keep the "onfocus and onblur", remove anything else,
Edit, For the "Option:checked" the background color has to be a "linear-gradient" to work, you can set the same color twice if you don't want a gradient. ❤

[sakthivelnagendran]

Hi, how to change the default blue background color

[gabrielpereyra]

This was pretty helpful, but now I'm wondering how we can change the default blue highlight to another color.

[jaiprakashrai]

@ByteGrad -A keyboard user is not able to select the options of this <select> example because of the presence of additional onfocus, onblur, and onchange . Please consider accessibility in your courses.

[FreddDigitalPainting]

Hi !
Your code works on Chrome. On Firefox the color of the selected element disappears.

[niharikasaitana]

how to set dynamically for all the option tag inside the select

[ghazanferwahab]

did not work for me bro can u tell why:
option:hover {

background: aqua !important;

}

[val]

what is our selector has a id? where would the id go inside the css?