포커스가 있을 때 내비게이션 모양이 마음에 들지 않기 때문에 필요하지 않을 때 포커스를 비활성화하고 싶습니다. 그것에. .active와 동일한 스타일을 사용하므로 혼란스럽습니다. 그러나 키보드를 사용하는 사람들을 위해 이 클래스를 제거하고 싶지는 않을 것입니다.
일부 포스터에서는 :focus-visible 의사 클래스를 언급했는데, 이제 괜찮은 브라우저 지원이 있습니다. 사양에 따라 이제 브라우저는 사용자가 키보드나 기타 비포인팅 장치를 통해 페이지와 상호 작용할 때와 같이 사용자에게 도움이 될 때만 포커스를 표시해야 합니다.
이는 대부분의 경우 브라우저에서 사용자가 버튼(또는 포커스 가능한 다른 요소)을 클릭/탭하면 버튼에 포커스가 있어도 사용자 에이전트는 포커스 링을 표시하지 않습니다. 이 경우 포커스 링은 사용자에게 도움이 되지 않기 때문입니다.
이와 같이 :focus-visible을 사용할 때 발생할 수 있는 문제는 이를 지원하지 않는 브라우저에서 기본 포커스 링을 표시한다는 것입니다. design.
:focus-visible 솔루션이 이전 버전과의 호환성을 위해 충분하지 않은 경우 다음을 사용하여 버튼, 링크 및 기타 컨테이너 요소에 대해 키보드 전용 포커스 스타일을 얻을 수 있습니다. 다음 해결 방법:
button { -moz-appearance: none; -webkit-appearance: none; background: none; border: none; outline: none; font-size: inherit; } .btn { all: initial; margin: 1em; display: inline-block; } .btn__content { background: orange; padding: 1em; cursor: pointer; display: inline-block; } /* Fixing the Safari bug for `<button>`s overflow */ .btn__content { position: relative; } /* All the states on the inner element */ .btn:hover > .btn__content { background: salmon; } .btn:active > .btn__content { background: darkorange; } .btn:focus > .btn__content { box-shadow: 0 0 2px 2px #51a7e8; color: lime; } /* Removing default outline only after we've added our custom one */ .btn:focus, .btn__content:focus { outline: none; }
이 기술은 모든 스타일을 컨테이너의 내부 요소에 배치하여 마우스를 사용할 때 포커스 스타일이 나타나는 것을 방지합니다.
위 내용은 키보드 접근성을 유지하면서 포커스 스타일을 비활성화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!