Cross Browsing
view
css
- 디자인을 해치지 않기 위해 outline(외곽선) 을 없애야 하는 경우,
마우스 클릭 및 터치를 할 경우에는 outline을 없애고 키보드로 작동할 경우에만 outline 표시 - 초점은 시각적으로 구분이 가능하도록 명도 대비 3:1 이상이 되어야 함 (참고 : WCAG 2.1 SC 1.4.11 비텍스트 대비)
- 값을 입력하는 태그인
textarea,input[type="text, date, number"]등의 경우에는 초점이 동일하게 보여짐
1
2
3
4
5
6
7
*:focus {
outline: none;
}
*:focus-visible {
outline: 1px dashed black;
}