Safari 및 Chrome의 입력 텍스트 요소에서 포커스 테두리를 어떻게 제거할 수 있습니까?

입력 텍스트 요소 초점 테두리 제거

입력 텍스트 요소에 초점이 맞춰지면 Safari 및 Chrome을 포함한 특정 브라우저에 파란색 테두리가 표시될 수 있습니다. 그들 주변. 이 시각적 신호는 접근성과 유용성에 유용할 수 있지만 특정 디자인 레이아웃에서는 항상 바람직하지 않을 수 있습니다.

Safari에서 이 테두리 강조 표시를 제거하려면 CSS를 활용하세요.

input.middle:focus {
    outline-width: 0;
}

이것은 타겟팅을 사용하면 원하는 입력 요소를 '중간' 클래스로 격리할 수 있습니다. 또는 모든 양식 요소에 영향을 미치려면 다음을 사용하세요.

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

Noah Whitmore는 이를 콘텐츠 편집 가능한 요소로 확장할 것을 제안합니다.

[contenteditable="true"]:focus {
    outline: none;
}

궁극적으로 다음을 사용하여 모든 요소에 대한 초점 윤곽선을 비활성화할 수도 있습니다.

*:focus {
    outline: none;
}

그러나 이 접근 방식은 접근성 문제로 인해 권장되지 않습니다. 초점 개요는 인터페이스를 탐색하는 사용자에게 유용한 지표 역할을 한다는 점을 기억하세요.

위 내용은 Safari 및 Chrome의 입력 텍스트 요소에서 포커스 테두리를 어떻게 제거할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!