다양한 브라우저에서 선택 옵션 요소의 스타일을 안정적으로 지정할 수 있는 방법은 무엇입니까?

다른 브라우저에서 선택 옵션 요소 스타일 지정

선택 메뉴 내의 옵션 요소 스타일 지정은 특히 IE9 및 Chrome과 같은 이전 브라우저에서 문제가 될 수 있습니다. . 일부 브라우저는 CSS를 사용하여 이러한 요소의 스타일 지정을 지원하지만 다른 브라우저는 제한 사항이 있을 수 있습니다.

IE9 및 Chrome의 옵션 요소 스타일 지정 문제

제공된 코드는 스타일을 지정하려는 시도를 보여줍니다. 클래스 선택기를 사용하는 옵션 요소:

option.red {
    background-color: #cc0000; 
    font-weight: bold; 
    font-size: 12px; 
    color: white;
}

그러나 IE9 및 Chrome에서는 이 스타일이 배경에 적용되지 않습니다. 옵션 색상입니다. 이는 WebKit 브라우저가 색상 및 배경색을 제외한 옵션 요소의 스타일을 완전히 지원하지 않기 때문입니다.

크로스 브라우저 솔루션

모든 브라우저가 그런 것은 아니기 때문에 스타일 선택 옵션에 대한 일관된 지원을 제공하는 경우 보다 안정적인 접근 방식은 포괄적인 CSS 사용자 정의를 허용하는 대체 HTML 구조를 활용하는 것입니다. 선택 메뉴를 ul(순서가 지정되지 않은 목록)과 li(목록 항목)의 조합으로 바꾸면 됩니다:

HTML:

<ul>
    <li>Red</li>
    <li>White</li>
    <li>Blue</li>
    <li>Green</li>
</ul>

CSS:

ul {
    display: flex;
    flex-direction: column;
    padding: 0;
}

li {
    list-style-type: none;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

li:hover {
    background-color: #cc0000;
}

이 방법을 사용하면 CSS의 모양을 완전히 제어할 수 있습니다. 배경색 및 기타 스타일 옵션을 포함한 옵션.

위 내용은 다양한 브라우저에서 선택 옵션 요소의 스타일을 안정적으로 지정할 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!