CSS :focus 의사 클래스: 포커스 대상
CSS :focus
의사 클래스는 포커스를 부여받은 요소를 나타냅니다. 주로 양식의 입력 칸 등의 스타일에 사용합니다. 포커스는 보통 사용자가 요소를 클릭이나 터치할 때, 또는 키보드 Tab으로 선택할 때 부여됩니다.
<label for="name">이름</label>
<input id="name" type="text">
<br>
<label for="occupation">직업</label>
<select id="occupation">
<option>전문직</option>
<option>사무직</option>
<option>서비스/영업/판매직</option>
<option>생산/기술직/노무직</option>
<option>교사/강사</option>
<option>학생</option>
<option>프리랜서</option>
<option>무직</option>
<option>기타</option>
</select>
<br>
<button type="button">확인</button>
input:focus {
background: lightblue;
outline: 2px solid dodgerblue;
}
select:focus {
background: khaki;
}
button:focus {
outline: 2px dashed mediumseagreen;
}
불러오는 중...
:focus
는 포커스를 직접 부여받은 요소에만 적용됩니다. 포커스된 요소의 조상에 스타일을 적용해야 하면 :focus-within
의사 클래스를 사용하세요.
구문
:focus {
/* ... */
}
접근성
저시력 사용자도 시작적 포커스 표시자를 볼 수 있어야 합니다. 저시력 사용자뿐만 아니라 밝은 곳, 예컨대 직사광선 아래에서 화면을 보는 사용자에게도 도움이 됩니다. WCAG 2.1 SC 1.4.11 Non-Text Contrast에서는 시각적 포커스 표시자의 대비를 적어도 3:1 요구합니다.
외곽선 제거
포커스 표시자 외곽선을 제거하면 접근성을 해칩니다. WCAG 2.1 SC 1.4.11 Non-Text Contrast를 만족하는 포커스 표시자로 대체하세요.
:focus {
outline: none;
}
명세
브라우저 호환성
데스크톱 | 모바일 | ||||||
---|---|---|---|---|---|---|---|
iOS | Android | ||||||
Safari | Chrome | Firefox | Safari | Chrome | Firefox | Samsung Internet | |
:focus |