선택한 옵션을 기반으로 CSS 스타일을 선택 요소에 적용할 수 있나요?

선택한 항목에 스타일 지정: 선택한 옵션에 따라 CSS 스타일을 지정할 수 있나요?

선택 요소의 모양을 사용자 정의할 수 있나요? 현재 선택된 옵션을 기반으로 합니까? JavaScript 솔루션이 있음에도 불구하고 이 질문은 종종 발생합니다.

불가능에 도전하기

<옵션> 시도한 대로 요소 자체는 옵션 목록에 있을 때 모양을 수정하지만 선택했을 때는 모양을 수정하지 않습니다. CSS만으로는 현재의 기술적 한계로 인해 선택한 요소를 직접 타겟팅할 수 없습니다.

주제 선택기를 구출하시겠습니까?

CSS 4에서 제안하는 주제 선택기는 향후 잠재력을 제공할 수 있습니다. 그러나 현재로서는 이 기능을 사용할 수 없습니다.

:has 의사 클래스

:has 의사 클래스가 부분적으로 도움이 될 수 있지만 스타일 지정에만 국한됩니다. HTML 속성을 기반으로 선택하고 옵션이 처음에 명시적으로 선택된 경우에만 선택됩니다. CSS가 의존하는 HTML 속성에 영향을 주지 않고 DOM 속성을 수정하는 선택 항목을 사용자가 변경할 때 한계가 명백해집니다.

CSS 전용 솔루션

CSS의 한계 때문에 영리한 해결책이 존재합니다. onchange 이벤트에 값 할당과 함께 데이터 선택 속성을 도입함으로써 선택 요소가 현재 옵션을 인식하도록 할 수 있습니다. 이는 CSS가 선택한 옵션을 기반으로 타겟팅하고 스타일을 지정할 수 있는 기회를 만듭니다.

<select onchange="this.dataset.chosen = this.value;">
  ...
</select>

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

이 우아한 솔루션을 사용하면 CSS가 JavaScript 없이도 선택한 옵션을 기반으로 선택 요소의 모양을 사용자 정의할 수 있습니다.

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