CSS - Pseudo-class :active Property

Quiz

The :active pseudo-class in CSS comes into action when an element gets activated by the user. So, it represents an element on activation, like a button.

:active pseudo-class is mostly used on:

elements like <a> and <button>.
elements that are placed inside an activated element.
elements of a form, which gets activated via the associated <label>.

You must place the :active rule after all the other link-related rules, that are defined by, LVHA-order, i.e. :link-:visited-:hover-active. This is important as the styles specified by :active gets overriden by the subsequent link-related pseudo-classes, such as :link, :hover or :visited.

Syntax

selector:active {
   /* ... */
}

CSS :active Example

Here is an example of changing the foreground & background color of a link:

<html>
<head>
<style>
   div {
      padding: 1rem;
   }
   a {
      background-color: rgb(238, 135, 9);
      font-size: 1rem;
      padding: 5px;
   }
   a:active {
      background-color: lightpink;
      color: darkblue;
   }
   p:active {
      background-color: lightgray;
   }
</style>
</head>
<body>
   <div>
      <h3>:active example - link</h3>
      <p>This paragraph contains me, a link, <a href="#">see the color change when I am clicked!!!</a></p>
   </div>
</body>
</html>

Here is an example of changing the border, foreground & background color of a button, when activated:

<html>
<head>
<style>
   div {
      padding: 1rem;
   }
   button {
      background-color: greenyellow;
      font-size: large;
   }
   button:active {
      background-color: gold;
      color: red;
      border: 5px inset grey;
   }
</style>
</head>
<body>
      <h3>:active example - button</h3>
      </div>   
         <button>Click on me!!!</button>
      </div>
</body>
</html>

Here is an example, where a form element is activated using the pseudo-class :active:

<html>
<head>
<style>
   form {
      border: 2px solid black;
      margin: 10px;
      padding: 5px;
   }
   form:active {
      color: red;
      background-color: aquamarine;
   }

   form button {
      background: black;
      color: white;
   }
</style>
</head>
<body>
      <h3>:active example - form</h3>
      <form>
         <label for="my-button">Name: </label>
         <input id="name"/>
         <button id="my-button" type="button">Click Me!</button>
       </form>
</body>
</html>

Print Page