How Can I Customize Select List Option Highlights on Hover?

Modify Select List Option Highlight on Hover

Customizing the look and feel of select list options on hover can enhance user experience. One common request is to alter the default background color when an option is hovered over. Unfortunately, the CSS rule "option:hover { background-color: red; }" fails to achieve this.

Solution:

To resolve this issue, employ an inset box shadow:

select.decorated option:hover {
    box-shadow: 0 0 10px 100px #1882A8 inset;
}

In this example, the "decorated" class is applied to the select box. When an option within this decorated select box is hovered over, an inset box shadow with a color of #1882A8 is applied, creating the desired background color change. This technique effectively overrides the default highlight and provides a more customizable user interface.

The above is the detailed content of How Can I Customize Select List Option Highlights on Hover?. For more information, please follow other related articles on the PHP Chinese website!