There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

Bản dịch này chưa hoàn thành. Xin hãy giúp dịch bài viết này từ tiếng Anh.

{{CSSRef}}

Lớp giả  CSS :focus đại diện cho thành phần (như một input form) nhận focus. Nó được kích hoạt khi người dùng kích hoặc tap lên thành phần hoặc chọn nó bằng phím "tab".

/* Chọn bấy kỳ thành phần input nào được focus */
input:focus {
  color: red;
}

Chú ý: Lớp giả này chỉ áp dụng với chính thành phần được focus. Sử dụng {{cssxref(":focus-within")}} nếu bạn muốn chọn thành phần chứa một thành phần được focus.

Cú pháp

{{csssyntax}}

Ví dụ

HTML

<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">

CSS

.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

Kết quả

{{EmbedLiveSample('Example')}}

Chi tiết

Chi tiết Trạng th Comment
{{SpecName('HTML WHATWG', 'scripting.html#selector-focus', ':focus')}} {{Spec2('HTML WHATWG')}} Defines HTML-specific semantics.
{{SpecName('CSS4 Selectors', '#focus-pseudo', ':focus')}} {{Spec2('CSS4 Selectors')}} No change.
{{SpecName('CSS3 Selectors', '#the-user-action-pseudo-classes-hover-act', ':focus')}} {{Spec2('CSS3 Selectors')}} No change.
{{SpecName('CSS2.1', 'selector.html#dynamic-pseudo-classes', ':focus')}} {{Spec2('CSS2.1')}} Initial definition.

Tương thích trình duyệt

{{Bản tương thích}}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{CompatVersionUnknown}} {{CompatGeckoDesktop("1")}} 8.0 7.0 1.0
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 1.0 {{CompatVersionUnknown}} {{CompatGeckoMobile("1")}} 8.0 6.0 1.0

Xem cả

  • {{cssxref(":focus-within")}}

Document Tags and Contributors

 Những người đóng góp cho trang này: Sainojin
 Cập nhật lần cuối bởi: Sainojin,