CSS만 사용하여 선택한 옵션을 기반으로 선택 요소의 스타일을 지정할 수 있습니까?

스타일 선택한

선택된 CSS만 사용하시나요?

대중적인 믿음에도 불구하고 현재 선택된 순전히 CSS를 사용합니다.

금단의 열매? 더 이상은 아닙니다.

전통적으로

요소만으로는 드롭다운 목록의 옵션 모양만 수정되며 요소 자체. 그러나 CSS의 현대적인 발전으로 가능성의 새로운 지평이 열렸습니다.

:has() 의사 클래스를 입력하세요.

두 가지 :has를 모두 지원하는 브라우저에서 () 의사 클래스 및 의 스타일링 요소의 경우 다음 코드를 활용할 수 있습니다.

select:has(option[selected][value="3"]) {
  background: orange;
}

이 코드는 주황색 배경을

요소는 값이 '3'인 항목이 선택되었습니다.

하지만 잠깐만요, 더 있습니다!

CSS를 사용하면 onchange 이벤트를 통해 선택한 옵션의 변경 사항에 반응하는 요소입니다. 선택한 옵션의 값에 요소를 추가하면 사용자 상호 작용을 기반으로 동적인 스타일을 생성할 수 있습니다.

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

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

이 접근 방식을 사용하면 선택된 그리고 그 가치를 통해 광범위한 맞춤화 가능성이 가능해졌습니다.

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

css select using class Attribute Event this background

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

이전 기사：CSS를 사용하여 모서리에만 이미지 테두리를 표시하려면 어떻게 해야 합니까?다음 기사：CSS를 사용하여 모서리에만 이미지 테두리를 표시하려면 어떻게 해야 합니까?

관련 기사

더보기

• CSS 작성 시 Border에 대해 주의해야 할 사항 요약
• 다중 스타일 선택 및 스타일 실시간 전환 구현 방법_경험 교환
• Marquee의 상세한 사용 분석
• CSS标题线（删除线贯穿线效果）实现
• CSS3中优雅降级和渐进增强的区别

공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！

회사 소개부인 성명Sitemap

© php.cn All rights reserved