Tidadigi Logo

CSS :focus Selector

:focus CSS pseudo-class Selector được dùng để nhắm mục tiêu phần tử đang được focus. Nó chọn phần tử mà người dùng đang tương tác trực tiếp.

Selector này hoạt động trên các phần tử input, thường dùng trong form. Nó kích hoạt khi người dùng click, chạm hoặc dùng bàn phím.

Syntax:

:focus {
  // CSS property
}

Example: Ví dụ sau minh họa :focus selector để nhắm mục tiêu phần tử được chọn.

HTML 
<!DOCTYPE html>
<html>
<head>
    <style>
    input:focus {
        background-color: limegreen;
    }
    </style>
</head>
<body>
    <h3>Fill this form</h3>
    <form> Full name:
        <input type="text" 
               placeholder="Enter Name" 
               name="name">
        <br> User Id:
        <input type="text" 
               placeholder="Enter Username" 
               name="uid">
        <br> Password:
        <input type="password"
               placeholder="Enter Password" 
               name="pass">
        <br>
        <button type="button" 
                onclick="#">Sign Up</button>
    </form>
</body>
</html>

Output:

css-focus-selector

Supported Browsers:

  • Google Chrome 1.0
  • Microsoft Edge 12.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 7.0

Last Updated : 21/07/2025