CSS만으로 선택한 옵션에 따라 선택 요소의 스타일을 지정할 수 있나요?

에 스타일 적용 선택한 옵션을 기반으로 한 요소: CSS 전용 접근 방식

전통적으로

선택한 옵션을 기반으로 하는 요소는 JavaScript 솔루션에 의존합니다. 그러나 CSS를 사용하면 이제 CSS를 통해서만 이 효과를 얻을 수 있습니다.

과제: 옵션 요소 스타일링>

요소는 옵션 목록 내의 모양에만 직접적인 영향을 미치며 선택한 요소에는 영향을 미치지 않습니다.

select[name="qa_contact"] option[value="3"] {
background: orange;
}

해결책: onchange 활용 이벤트

요소가 선택한 옵션을 인식하면 onchange 이벤트의 data-chosen 속성에 값을 할당할 수 있습니다.

이제 타겟팅하고 스타일을 지정할 수 있습니다. <선택> 데이터 선택 속성에 할당된 값을 기반으로 하는 요소입니다.

select[data-chosen='opt3'] {
border: 2px solid red;
}

이 접근 방식을 사용하여 CSS만 사용하여 선택한 옵션을 기반으로 하는 요소.

향후 CSS 개선: 주제 선택기

현재는

CSS 3에서 선택한 옵션을 기반으로 하는 요소, CSS 4의 주제 선택기와 같은 업데이트로 인해 향후 이 기능이 도입될 가능성이 있습니다. 하지만 이 기능이 현실화될지는 미지수입니다.

위 내용은 CSS만으로 선택한 옵션에 따라 선택 요소의 스타일을 지정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!