마우스 오버 시 선택 목록 옵션 하이라이트를 어떻게 사용자 정의할 수 있습니까?

마우스를 올리면 선택 목록 옵션 강조 표시 수정

마우스를 올리면 선택 목록 옵션의 모양과 느낌을 맞춤설정하여 사용자 경험을 향상할 수 있습니다. 일반적인 요청 중 하나는 옵션 위에 마우스를 올리면 기본 배경색을 변경하는 것입니다. 안타깝게도 CSS 규칙 "option:hover { background-color: red; }"는 이를 달성하지 못합니다.

해결책:

이 문제를 해결하려면 삽입 상자 그림자:

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

이 예에서는 "장식된" 클래스가 선택 상자에 적용됩니다. 이 장식된 선택 상자 내의 옵션 위에 마우스를 올리면 #1882A8 색상의 삽입 상자 그림자가 적용되어 원하는 배경색 변경이 생성됩니다. 이 기술은 기본 강조 표시를 효과적으로 재정의하고 더욱 사용자 정의 가능한 사용자 인터페이스를 제공합니다.

위 내용은 마우스 오버 시 선택 목록 옵션 하이라이트를 어떻게 사용자 정의할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!