The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.
The :active pseudo-class is commonly used on <a> and <button> elements. Other common targets of this pseudo-class include elements that are contained in an activated element, and form elements that are being activated through their associated <label>.
Styles defined by the :active pseudo-class will be overridden by any subsequent link-related pseudo-class (:link, :hover, or :visited) that has at least equal specificity. To style links appropriately, put the :active rule after all other link-related rules, as defined by the LVHA-order: :link — :visited — :hover — :active.
Note: On systems with multi-button mice, CSS3 specifies that the :active pseudo-class must only apply to the primary button; on right-handed mice, this is typically the leftmost button.
:active
<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>
a:link { color: blue; } /* Unvisited links */ a:visited { color: purple; } /* Visited links */ a:hover { background: yellow; } /* Hovered links */ a:active { color: red; } /* Active links */ p:active { background: #eee; } /* Active paragraphs */
<form> <label for="my-button">My button: </label> <button id="my-button" type="button">Try Clicking Me or My Label!</button> </form>
form :active { color: red; } form button { background: white; }
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
:active |
1 |
12 |
1 |
4 |
5 |
1 |
4.4 |
18 |
4 |
10.1 |
1 |
1.0 |
non_a_elements |
1 |
12 |
1 |
8 |
7 |
1 |
4.4 |
18 |
4 |
14 |
1
By default, Safari on iOS does not use the
:active state unless there is a touchstart event handler on the relevant element or on the <body> element. |
1.0 |