1

Tried a lot to change the background color of select option on hover but unable to do so please help me to find the solution.

select.rangs option:hover {
 box-shadow: 0 0 10px 100px #ffea00 inset;}
option.rang:hover {
 background: #ffea00 !important;}

<select id="order" name="order" title="order" class="form-control form-login__input-field label-error rangs">
 <option class="rang" value="">Sort By</option>
 <option class="rang" value="popular">Most popular</option>
 <option class="rang" value="register_desc">Oldest First</option>
 <option class="rang" value="register_asc">Newest First</option>

I want the background color to be changed on hover in chrome

Abhishek rampal
  • 11
  • 1
  • 6
  • 1
    Possible duplicate of [How to change select options hover background color using only css?](https://stackoverflow.com/questions/34574430/how-to-change-select-options-hover-background-color-using-only-css) – Sumit Patel Sep 13 '19 at 05:06
  • Also dup of https://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover – wazz Sep 13 '19 at 05:08
  • 1
    Possible duplicate of [Change Select List Option background colour on hover](https://stackoverflow.com/questions/10484053/change-select-list-option-background-colour-on-hover) – wazz Sep 13 '19 at 05:17

2 Answers2

0

You cannot change the background of the <option>, you can't set script or style inside option element. This is used to show only text inside option element no matter what text , style or scripts

The main property of option element is value that's why there is no need to add CSS on text inside <option>

You could only apply CSS on <select>:

select {
background: #ffea00;
}
Ritesh Khandekar
  • 3,885
  • 3
  • 15
  • 30
-1

Following code will help you. Run Code Snippet.

enter image description here

.rang:hover { background: #ffea00 !important;}
<select id="order" name="order" title="order" class="form-control form-login__input-field label-error rangs">
 <option class="rang" value="">Sort By</option>
 <option class="rang" value="popular">Most popular</option>
 <option class="rang" value="register_desc">Oldest First</option>
 <option class="rang" value="register_asc">Newest First</option>
 </select>
Sandeep
  • 540
  • 1
  • 4
  • 15
  • Hi @wazz , He wants to change the background color of option on hover event And this working in my code. Is any problem? Please explain. – Sandeep Sep 13 '19 at 05:13
  • Doesn't work in chrome, or the snippet. How can you say it works? – wazz Sep 13 '19 at 05:16
  • Hi @wazz , its working on my chrome browser, Just a minute, I am attaching the screenshot. :) – Sandeep Sep 13 '19 at 05:19
  • Hi @wazz, please check, if anything wrong in my output, then please tell me. :) – Sandeep Sep 13 '19 at 05:22
  • 3
    The hover is blue in your image. The CSS is yellow. – wazz Sep 13 '19 at 05:23
  • Hi @wazz , You are right.. :) I just put the #ffea00 in my CSS and not checked that whether it is blue or yellow. Your reply helps me to find out my mistake, thanks for the reply. :) And, Sorry for the mistake. :( . I will try to makes this output correct. – Sandeep Sep 13 '19 at 05:42
  • Check the original post's comments and links to previous answers. It looks like this is not possible. You can delete this answer too, if you are allowed (not sure how many points you need). – wazz Sep 13 '19 at 05:53