CSS :focus
의사 클래스는 양식의 입력 칸 등 포커스를 받은 요소를 나타냅니다. 보통 사용자가 요소를 클릭 또는 탭하거나, 키보드 Tab 키로 선택했을 때 발동합니다.
/* Selects any <input> when focused */
input:focus {
color: red;
}
참고: :focus
는 포커스를 받은 요소 자체에만 해당합니다. 자손이 포커스를 받았을 때의 요소를 선택해야 하면 :focus-within
을 사용하세요.
구문
:focus
예제
HTML
<input class="red-input" value="저는 포커스를 받으면 빨갛게 됩니다."><br>
<input class="blue-input" value="저는 포커스를 받으면 파랗게 됩니다.">
CSS
.red-input:focus {
background: yellow;
color: red;
}
.blue-input:focus {
background: yellow;
color: blue;
}
결과
접근성 고려사항
낮은 시력을 가진 사용자도 시각적 포커스 지시자를 볼 수 있어야 합니다. 이는 또한 맑은 날의 외부처럼 밝은 공간에서의 스크린 사용자처럼 다른 사람에게도 도움이 될 수 있습니다. WCAG 2.1 SC 1.4.11 Non-Text Contrast는 시각적 포커스 지시자의 대비를 최소한 3:1로 요구하고 있습니다.
- Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
:focus { outline: none; }
절대 포커스의 기본 외곽선(시각적 포커스 지시자)을 대체 외곽선 없이 제거하지 마세요. 대체 외곽선은 WCAG 2.1 SC 1.4.11 Non-Text Contrast 기준을 통과해야 합니다.
- Quick Tip: Never remove CSS outlines
명세
Specification | Status | Comment |
---|---|---|
HTML Living Standard The definition of ':focus' in that specification. |
Living Standard | Defines HTML-specific semantics. |
Selectors Level 4 The definition of ':focus' in that specification. |
Working Draft | No change. |
Selectors Level 3 The definition of ':focus' in that specification. |
Recommendation | No change. |
CSS Level 2 (Revision 1) The definition of ':focus' in that specification. |
Recommendation | Initial definition. |
브라우저 호환성
BCD tables only load in the browser
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.