수동 포커스 스타일이 마우스 클릭 및 기본 포커스 스타일에 나타나는 이유는 무엇입니까?

Question

그래서 버튼과 같은 자신 만의 포커스 스타일을 만들면 버튼을 마우스로 클릭 한 후에 스타일이 표시됩니다. 그러나 기본 포커스 스타일로 버튼을 클릭하면 윤곽선이 표시되지 않습니다.

그러나 버튼을 완전히 탭할 수 있으며 초점이 맞으면 둘 다 윤곽선을 표시합니다.

나는 왜 기본 포커스 스타일링과 내 자신의 포커스 스타일링이 같은 방식으로 작동하지 않는지 궁금합니다. 둘 다 키보드 탐색에 표시되는 이유는 무엇입니까? 그러나 마우스 클릭시 그 중 하나만 표시됩니까?

모두 클릭을 시도하고이 버튼에 키보드로 이동하십시오 :

button { 
 
    padding: .5rem; 
 
    margin: 2rem; 
 
} 
 

 
.my-button:focus { 
 
    outline: 3px solid red; 
 
}

<button type="button"> 
 
    This button has default focus styling 
 
</button> 
 

 
<button type="button" class="my-button"> 
 
    This button has my own focus styling 
 
</button>

PS를 : 나는 어떤 자바 스크립트 해키 솔루션에 관심이 아니에요, 또는 초점 스타일링을 제거 어쨌든. 나는 왜 웹이 이런 방식으로 작동 하는지를 배우고 싶다.

Answer 1

기본적으로 개요 속성은 키보드 사용자를위한 내게 필요한 옵션 도구입니다. 마우스를 사용하여 커서는 어떤 요소에 포커스가 있는지 알 수있는 시각 도구입니다. 윤곽선이 보이지 않는 요소로 채워진 화면을 탭하면 사용자가 탭이있는 위치를 추적 할 수 없게됩니다 (이 때문에 never remove the outline이 완전해야합니다).

Answer 2

크롬 사용 outline-style: auto 다음과 같은

This is defined by CSS specs 다음 auto 값이 두 플랫폼을위한 사용자 인터페이스의 기본 인 사용자 정의 개요 스타일, 일반적으로 스타일을 렌더링하기 위해 사용자 에이전트를 허용

, 또는 CSS에서 자세히 설명 할 수있는 것보다 더 풍부한 스타일 일 것입니다. 반투명 한 바깥 쪽 픽셀이있는 둥근 가장자리 윤곽선이 빛나 보입니다. 따라서,이 규격은 윤곽선 색을 통합하거나 사용하는 방법을 정의하지 않는다 (전혀). auto 스타일 외곽선을 렌더링 할 때. 사용자 에이전트는 을 solid으로 처리 할 수 ​​있습니다.

즉, 모든 브라우저가 solid과 auto이 같은 것으로 간주하지는 않습니다.

그리고 당신은 solid보다는 auto 값을 사용하여 크롬과 같은 동작을 재현 할 수는 :

button { 
 
    padding: .5rem; 
 
    margin: 2rem; 
 
} 
 

 
.my-button:focus { 
 
    outline: 3px auto red; 
 
}

<button type="button"> 
 
    This button has default focus styling 
 
</button> 
 

 
<button type="button" class="my-button"> 
 
    This button has my own focus styling 
 
</button>