최신 브라우저의 키보드 전용 포커스 스타일
최신 브라우저에서는 :focus-visible 의사 클래스를 활용하여 키보드- 초점 스타일만. 이 의사 클래스는 사용자가 키보드나 기타 비포인팅 장치를 통해 페이지와 상호 작용할 때 초점이 맞춰진 요소를 일치시켜 사용자에게 도움이 될 때 초점을 나타냅니다. 결과적으로 사용자가 클릭하거나 탭하여 상호작용할 때 포커스 링이 억제됩니다.
:focus-visible을 사용한 사용자 정의 포커스 스타일링
사용자 정의 포커스 스타일을 유지하면서 구현하려면 이전 브라우저와의 호환성을 위해서는 다음 접근 방식을 따르십시오.
<code class="css">button:focus { /* Default focus styles */ } button:focus:not(:focus-visible) { /* Undo default focus styles */ }</code>
:focus-visible을 지원하는 브라우저에서는 :focus-visible이 비활성화된 경우 두 번째 규칙이 첫 번째 규칙에 정의된 포커스 스타일을 재정의합니다. 이렇게 하면 :focus-visible이 활성화된 경우에만 포커스 스타일이 적용됩니다.
이전 브라우저를 위한 원래 솔루션
:focus-visible을 지원하지 않는 브라우저의 경우, 대안적인 접근 방식은 Roman Komarov의 기사에서 제안한 대로 각 포커스 가능 요소 내에 추가 요소를 사용하는 것입니다.
<code class="css">/* Root button styling */ .btn { all: initial; display: inline-block; } /* Inner content element */ .btn__content { background: orange; cursor: pointer; display: inline-block; } /* Custom focus styles on inner element */ .btn:focus > .btn__content { box-shadow: 0 0 2px 2px #51a7e8; color: lime; }</code>
내부 요소에 포커스 스타일을 배치하고 상위 요소와 내부 요소 모두에서 기본 윤곽선을 제거합니다. 사용자 정의 포커스 스타일을 추가한 후에는 키보드 상호 작용만 기본 표시 요소에 포커스 스타일을 적용합니다.
위 내용은 :focus-visible을 사용하여 키보드 전용 포커스 스타일을 어떻게 구현할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!