CSS :focus 의사 클래스: 포커스 대상

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;
}

명세

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
:focus

마지막 수정:

CC BY-SA 4.0 unless otherwise noted. See LICENSE.