:focus
Selector :focus được dùng để áp dụng kiểu dáng bắt buộc khi một phần tử form nhận được focus như nút bấm, liên kết, hộp nhập liệu. Một phần tử có thể nhận focus bằng chuột hoặc phím Tab. Focus vẫn nằm trên phần tử cho đến khi một phần tử khác nhận focus.
:active
Selector :active được dùng để chỉ ra rằng một thẻ neo (anchor) đang hoạt động hoặc một nút bấm đang hoạt động. Khi chuột được nhấn xuống, selector active được áp dụng và vẫn áp dụng cho đến khi chuột được thả ra.
Ví dụ
Ví dụ sau cho thấy cách sử dụng selector :focus cũng như :active trên nút bấm và liên kết.
<!DOCTYPE html> <html> <head> <title>Selector Example</title> <style> button { border: 2px solid black; } button:focus { border: 2px dotted red; } a { color: black; } a:active { color: red; } </style> </head> <body> <button type="submit">Focus Me</button> <a href="#">Active Me</a> </body> </html>
Kết quả
