포커스 가상 클래스

가상 클래스 focus는 입력 포커스를 가진 입력 필드, 텍스트 영역 또는 링크의 스타일을 지정합니다. 입력 포커스는 입력 필드를 클릭했을 때 깜박이는 막대 커서가 나타나 (텍스트 입력이 가능한) 상태를 의미합니다.

구문

cssinput:focus {
  
}

예시

포커스를 얻은 후 입력 필드는 빨간색 테두리와 그림자를 갖게 됩니다:

html<input>
cssinput:focus {
  border: 1px solid red;
  box-shadow: 0 0 3px red;
}

Результат:

함께 보기

  • 방문하지 않은 링크의 스타일을 지정하는 가상 클래스 link
  • 방문한 링크의 스타일을 지정하는 가상 클래스 visited
  • 마우스 오버 시 링크의 스타일을 지정하는 가상 클래스 hover
  • 활성화(클릭) 시 링크의 스타일을 지정하는 가상 클래스 active