Change Select List Option Background-Color on Hover in CSS

👉 NEW React & Next.js Course: bytegrad.com/c...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). I'll help you master the latest tech here:
👉 NEW React & Next.js Course: bytegrad.com/c...
👉 Professional JavaScript Course: bytegrad.com/c...
👉 Professional CSS Course: bytegrad.com/c...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad...
0:00 Solution
#webdevelopment #coding #programming

[@ByteGrad]

Hi, mastering JavaScript is critical if you want to be a modern, professional developer: www.udemy.com/course/professional-javascript-course/?referralCode=0C1D5752923168BC87C2
Also, if you are a front-end developer then mastering CSS (including Flexbox, CSS Grid, etc.) is equally important: www.udemy.com/course/professional-css/?referralCode=4C3C08E82629E6B15752

[@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. ❤

[@sakthivelnagendran3068]

Hi, how to change the default blue background color

[@FaisalAnsari-ch4pl]

Did you get the answer

[@alambis]

How to cahnge that.😢

[@niiiseniisenise]

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.

[@timoosterveer4087]

@@niiiseniisenise Thankyou, very much!

[@jaiprakashrai969]

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

[@Fred3dDigitalPainting]

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

[@desteryezithcaballero6874]

ty for the video bro

[@gabrielpereyra6759]

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

[@niiiseniisenise]

This was my problem too!! I fixed it finally with:
option:checked {
background: linear-gradient(to right, green, green);
}
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.

[@gabrielpereyra6759]

@@niiiseniisenise ill have to try that! Thanks for the info 😊

[@gabrielpereyra6759]

@@niiiseniisenise I couldn't get it to work haha. When I revisited Google about it, I kept finding work arounds like using custom radio buttons to mimic select/option elements, or to use java

[@niiiseniisenise]

@@gabrielpereyra6759 do you have a git repo? maybe i can help

[@niharikasaitana5793]

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

[@rohitdighe852]

javascript? or use child selector

[@v2al389]

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

[@talhaanwar7265]

Thanks bro 😊

[@ghazanferwahab5673]

did not work for me bro can u tell why:
option:hover {
background: aqua !important;
}