Change Select Option Background-Color on Hover in CSS/HTML

# Table of Contents

# Change Select option Background-Color on Hover in CSS/HTML

To change the background color of a select option element on hover:

Set the onfocus attribute on the element so that all options are shown when the element is focused.
When the element loses focus or an option is selected, change the element's size back to 1.
Set the background-color CSS property on the hover state of the option elements.

Here is the code for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <style>
    option:checked,
    option:hover {
      background-color: lime;
    }
  </style>

  <body>
    <select
      name="languages"
      id="language-select"
      onfocus="this.size=6;"
      onblur="this.size=0;"
      onchange="this.size=1; this.blur()"
    >
      <option value="">--Choose an option--</option>
      <option value="javascript">JavaScript</option>
      <option value="typescript">TypeScript</option>
      <option value="python">Python</option>
      <option value="java">Java</option>
      <option value="php">PHP</option>
    </select>
  </body>
</html>

change option background color on hover

The code for this article is available on GitHub

We set a couple of attributes on the select element.

The onfocus attribute is used to trigger an action when the element receives focus.

When the user clicks on the select element, we set the element's size to 6.

index.html

Copied!
<select
  name="languages"
  id="language-select"
  onfocus="this.size=6;"
  onblur="this.size=0;"
  onchange="this.size=1; this.blur()"
>

There are 6 option elements in the example, so I used a size value of 6 to display all options without a vertical scrollbar.

The size attribute determines the number of rows in the list that should be visible at one time.

We also set the onBlur attribute on the select element.

The blur event is triggered when an element has lost focus.

When the user clicks off, we set the size attribute back to 0, to display the initial or selected value of the element.

The onchange event is fired when the user selects a different option element.

When the user selects a different option, we set the size attribute to 1 and then trigger the onBlur event to show the selected option.

change option background color on hover

The styling in the example is quite intuitive. I've used a style tag to set the element's background-color CSS Property on hover.

index.html

Copied!
<style>
  option:checked,
  option:hover {
    background-color: lime;
  }
</style>

# Using an external CSS stylesheet instead

Alternatively, you can use an external CSS file.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <link rel="stylesheet" href="style.css" />

  <body>
    <select
      name="languages"
      id="language-select"
      onfocus="this.size=6;"
      onblur="this.size=0;"
      onchange="this.size=1; this.blur()"
    >
      <option value="">--Choose an option--</option>
      <option value="javascript">JavaScript</option>
      <option value="typescript">TypeScript</option>
      <option value="python">Python</option>
      <option value="java">Java</option>
      <option value="php">PHP</option>
    </select>

  </body>
</html>

The code for this article is available on GitHub

And here is the related style.css file.

style.css

Copied!
option:checked,
option:hover {
  background-color: lime;
}

If I issue the npx serve . command and load the index.html page in my browser, I can see that everything works as expected.

change option background color on hover external css file

However, notice that the background color of the selected option element doesn't change on hover.

# Using a box shadow to change the Background-Color of an option on Hover

If you also need to change the background color of the selected option element, use the box-shadow CSS property.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <style>
    option:checked,
    option:hover {
      box-shadow: 0 0 10px 100px #4ddc3b inset;
    }
  </style>

  <body>
    <select
      name="languages"
      id="language-select"
      onfocus="this.size=6;"
      onblur="this.size=0;"
      onchange="this.size=1; this.blur()"
    >
      <option value="">--Choose an option--</option>
      <option value="javascript">JavaScript</option>
      <option value="typescript">TypeScript</option>
      <option value="python">Python</option>
      <option value="java">Java</option>
      <option value="php">PHP</option>
    </select>

  </body>
</html>

change option background color on hover using box shadow

The code for this article is available on GitHub

The short clip shows that the background color of the selected option is also set.

The box-shadow CSS property usually adds a shadow effect around the element's frame.

However, if the inset value is set, the shadow is inside the frame of the element.

As shown in this section of the MDN docs, inset shadows are drawn:

inside the border of an element
above the background color
below the content

We specified 5 values when setting the box-shadow CSS property.

index.html

Copied!
<style>
  option:checked,
  option:hover {
    box-shadow: 0 0 10px 100px #4ddc3b inset;
  }
</style>

The values are:

offset-x - the horizontal distance.
offset-y - the vertical distance.
blur-radius - when a larger blur-radius is set, a bigger blur effect is displayed and the shadow becomes larger.
spread-radius - positive values cause the shadow to expand and negative values cause it to shrink.
color - the color to be displayed when the user hovers over an option element.

# Styling each option with a different background color on hover

You can use the same approach if you need to style each option element with a different background color on hover.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <style>
    option.yellow:hover {
      box-shadow: 0 0 10px 100px yellow inset;
    }

    option.lime:hover {
      box-shadow: 0 0 10px 100px lime inset;
    }

    option.pink:hover {
      box-shadow: 0 0 10px 100px pink inset;
    }
  </style>

  <body>
    <select
      name="languages"
      id="language-select"
      onfocus="this.size=4;"
      onblur="this.size=0;"
      onchange="this.size=1; this.blur()"
    >
      <option value="">--Choose an option--</option>
      <option class="yellow" value="javascript">
        JavaScript
      </option>
      <option class="lime" value="typescript">TypeScript</option>
      <option class="pink" value="python">Python</option>
    </select>

  </body>
</html>

style each option with different background color on hover

The code for this article is available on GitHub

I set a class on each option element and used the class when setting the box-shadow CSS property on the elements.

I've also written detailed articles on:

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Change Select Option Background-Color on Hover in CSS/HTML

# Table of Contents