CSS :포커스 선택기
예시
포커스를 받으면 입력 필드를 선택하고 스타일을 지정합니다.
input:focus
{
background-color: yellow;
}
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
:focus
선택자는 포커스가 있는 요소를 선택하는 데 사용됩니다 .
팁: :focus 선택기는 키보드 이벤트 또는 기타 사용자 입력을 허용하는 요소에서 허용됩니다.
버전: | CSS2 |
---|
브라우저 지원
표의 숫자는 선택기를 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Selector | |||||
---|---|---|---|---|---|
:focus | 4.0 | 8.0 | 2.0 | 3.1 | 9.6 |
CSS 구문
:focus {
css declarations;
}
더 많은 예
예시
<input type="text">가 포커스를 받으면 너비를 점차적으로 100px에서 250px로 변경합니다.
input[type=text] {
width: 100px;
transition: ease-in-out, width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
관련 페이지
CSS 튜토리얼: CSS 의사 클래스