:active
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
:active là lớp giả CSS đại diện cho một phần tử (chẳng hạn như một nút bấm) đang được kích hoạt bởi người dùng. Khi sử dụng chuột, "kích hoạt" thường bắt đầu khi người dùng nhấn nút chuột chính xuống.
Try it
.joinBtn {
width: 10em;
height: 5ex;
background-image: linear-gradient(135deg, #f34079 40%, #fc894d);
border: none;
border-radius: 5px;
font-weight: bold;
color: white;
cursor: pointer;
}
.joinBtn:active {
box-shadow: 2px 2px 5px #fc894d;
}
<p>Would you like to subscribe to our channel?</p>
<button class="joinBtn">Subscribe</button>
Lớp giả :active thường được dùng với các phần tử <a> và <button>. Các đối tượng phổ biến khác của lớp giả này bao gồm các phần tử nằm trong một phần tử đang được kích hoạt, và các phần tử biểu mẫu đang được kích hoạt thông qua <label> liên kết với chúng.
Các kiểu được định nghĩa bởi lớp giả :active sẽ bị ghi đè bởi bất kỳ lớp giả liên quan đến liên kết nào tiếp theo (:link, :hover, hoặc :visited) có độ ưu tiên ít nhất bằng nhau. Để tạo kiểu liên kết đúng cách, hãy đặt quy tắc :active sau tất cả các quy tắc liên quan đến liên kết khác, theo thứ tự LVHA: :link — :visited — :hover — :active.
Note:
Trên các hệ thống có chuột nhiều nút, CSS quy định rằng lớp giả :active chỉ được áp dụng cho nút chính; trên các chuột thuận tay phải, đây thường là nút bên trái nhất.
Cú pháp
:active {
/* ... */
}
Ví dụ
Liên kết đang hoạt động
HTML
<p>
This paragraph contains a link:
<a href="#">This link will turn red while you click on it.</a>
The paragraph will get a gray background while you click on it or the link.
</p>
CSS
/* Unvisited links */
a:link {
color: blue;
}
/* Visited links */
a:visited {
color: purple;
}
/* Hovered links */
a:hover {
background: yellow;
}
/* Active links */
a:active {
color: red;
}
/* Active paragraphs */
p:active {
background: #eeeeee;
}
Kết quả
Phần tử biểu mẫu đang hoạt động
HTML
<form>
<label for="my-button">My button: </label>
<button id="my-button" type="button">Try Clicking Me or My Label!</button>
</form>
CSS
form :active {
color: red;
}
form button {
background: white;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| HTML # selector-active |
| Selectors Level 4 # active-pseudo |