Home >Web Front-end >CSS Tutorial >How Can I Customize Select List Option Highlights on Hover?

How Can I Customize Select List Option Highlights on Hover?

DDD
DDDOriginal
2024-12-24 09:11:42396browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn