HTML "select" 요소의 옵션 스타일을 어떻게 지정합니까?

Question

이것은 내 HTML 코드입니다:

<select id="ddlProducts" name="ddProducts">
    <option>제품 1: 전자제품</option>
    <option>제품 2: 스포츠 용품</option>
</select>

CSS를 사용하여 제품 이름(예: '제품 1', '제품 2' 등)을 굵게 표시하고 해당 카테고리(예: 전자제품, 스포츠 용품 등)를 이탤릭체로 표시하고 싶습니다. HTML과 CSS를 사용하는 것은 불가능하다는 오래된 질문을 찾았지만 지금은 해결책이 있기를 바랍니다.

Answer 1

아니요, 이러한 요소의 스타일은 사용자 운영 체제에 의해 처리되므로 이는 불가능합니다. MSDN이 귀하의 질문에 답변해 드립니다:

Answer 2

<option> 요소에 적용할 수 있는 스타일 속성은 몇 가지뿐입니다.

이 유형의 요소는 "대체 요소"의 예이기 때문입니다. 운영 체제에 따라 다르며 HTML/브라우저의 일부가 아닙니다. CSS를 통해 스타일을 지정할 수 없습니다.

<select>처럼 보이지만 실제로는 스타일을 지정할 수 있는 일반 HTML 요소로 만들어진 대체 플러그인/라이브러리가 있습니다.