Change color of drop down selected option on hover

Question

I am trying to change the color of the initial (selected) text of my drop down menu on hover. For example, if 4am is the selected option, the text should only change on hover for that option. However the CSS I am applying is applying it for EVERY option within the drop down whenever I hover and try to select an option.

The "selected" option is dynamic depending on what time of the day someone shows up at website. I try to pre-select the closest hour to the time someone is visiting the website, which is why the hover is applied to the div rather than the selected option.

<div class="dropDownHover">
<select>
<option label="midnight" value="string:12:00 AM">midnight</option>
<option label="12:30 AM" value="string:12:30 AM">12:30 AM</option>
<option label="1:00 AM" value="string:1:00 AM">1:00 AM</option>
<option label="2:00 AM" value="string:2:00 AM">2:00 AM</option>
<option label="3:00 AM" value="string:3:00 AM">3:00 AM</option>
<option label="4:00 AM" value="string:4:00 AM" selected="selected">4:00 AM</option>
...
</select>
</div>

//css
.dropDownHover:{color: #333;}
.dropDownHover:hover{color: #ff0000;}

Any thoughts on how I could limit the hover effect to just the selected option?

Thanks in advance!

You will need to use something like [Select2](https://select2.org/) or [Selectize](https://selectize.github.io/selectize.js/) as dropdown styling is determined by the browser. — APAD1, Oct 07 '19 at 17:43
Possible duplicate of [How to style the option of an html "select" element?](https://stackoverflow.com/questions/7208786/how-to-style-the-option-of-an-html-select-element) — dw_, Oct 07 '19 at 17:51

score 0 · Answer 1 · answered Oct 07 '19 at 19:04

0

Try using $('.classname option:selected') and call the hover function it might work.

answered Oct 07 '19 at 19:04

arsal khan

94
4

score 0 · Answer 2 · answered Oct 07 '19 at 19:08

You can do this via CSS without JS, but not all browsers respect these settings. Using the HTML you posted originally:

select {
  color: purple;
}
select option[selected] {
  color: green;
}

<select>
  <option label="midnight" value="string:12:00 AM">midnight</option>
  <option label="12:30 AM" value="string:12:30 AM">12:30 AM</option>
  <option label="1:00 AM" value="string:1:00 AM">1:00 AM</option>
  <option label="2:00 AM" value="string:2:00 AM">2:00 AM</option>
  <option label="3:00 AM" value="string:3:00 AM">3:00 AM</option>
  <option label="4:00 AM" value="string:4:00 AM" selected="selected">4:00 AM</option>
</select>

This works on macOS Firefox but not on Chrome, for example, which instead gets its colors from my OS settings for theme and highlight color ‍♀️

score 0 · Answer 3 · answered Oct 14 '19 at 12:19

Try using

        body {
            margin: 0px;
        }
        select {
            border: 0;
            color: #eee;
            background: transparent;
            font-size: 20px;
            font-weight: bold;
            padding: 2px 10px;
            width: 350px;
            -webkit-appearance: none;
        }
        #mainselection {
            overflow: hidden;
            width: 350px;
            background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;
        }

    <div id="mainselection">
        <select>
            <option label="midnight" value="string:12:00 AM">midnight</option>
            <option label="12:30 AM" value="string:12:30 AM">12:30 AM</option>
            <option label="1:00 AM" value="string:1:00 AM">1:00 AM</option>
            <option label="2:00 AM" value="string:2:00 AM">2:00 AM</option>
            <option label="3:00 AM" value="string:3:00 AM">3:00 AM</option>
            <option label="4:00 AM" value="string:4:00 AM" selected="selected">4:00 AM</option>
        </select>
    </div>

Change color of drop down selected option on hover

3 Answers3