What is the difference between focus and active

:focus

• The :focus pseudo-class is applied when the user clicks or navigates using the keyboard (e.g., Tab key) to focus on an element. It is commonly used for form inputs such as <input> and <textarea>, where the :focus state is activated upon gaining focus.
• For example, when the user clicks on an input field and prepares to type text, the input field is in the :focus state.
• The :focus state is typically used to enhance accessibility and user experience by changing the element's style to indicate the currently interactive element.
• CSS code example:

  css
  input:focus {
    border: 2px solid blue;
  }

  This code means that when the input field gains focus, its border becomes 2 pixels wide and blue.

:active

• The :active pseudo-class is applied when the user clicks an element and the mouse button is pressed. It indicates that the element is being activated during the click.
• For example, when the user clicks a button, during the time the mouse button is pressed, the button is in the :active state.
• Unlike :focus, the :active state is typically very brief, existing only during the interaction.
• CSS code example:

  css
  button:active {
    background-color: red;
  }

  This code means that when the button is clicked, its background color changes to red.

Example Usage Scenarios

Suppose you have a submit button for a form. When the user navigates to the button using the keyboard and prepares to click it, the button may display an outline or shadow to indicate it has focus (:focus). When the user actually clicks the button and holds it down (before releasing the mouse button), the button's color may change or it may appear pressed, indicating it is active (:active).

These states can be combined to provide visual feedback and enhance the user interface's interactivity. For example, a button might define both :focus and :active pseudo-classes:

css
button:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}

button:active {
  transform: translateY(2px);
}

In this example, when the button gains focus, it displays a blue glow as an outline, and when the button is activated or clicked, it moves down by 2 pixels, giving the user a visual effect of pressing.

• :focus denotes the state where an element can receive input, such as when a cursor is present in an input field or a link is focused.
• :active represents the state during which a user is actively interacting with an element, specifically between pressing and releasing a mouse button.

• :active: Adds a style to an active element
• :focus: Adds a style to an element with keyboard focus
• :hover: Adds a style to an element when the mouse hovers over it
• :lang: Adds a style to an element with a specific lang attribute
• :link: Adds a style to unvisited links
• :visited: Adds a style to visited links

:focus and :active are two distinct states.

• :focus indicates the state when the selected element receives input.
• :active indicates the state when the element is currently activated by the user.

For example, consider a <button>. The <button> initially has no state; it simply exists. If we use the Tab key to give the <button> focus, it now enters its :focus state. If you then click (or press space), the button enters the :active state.

Note that when you click an element, you give it focus, which can create the illusion that :focus and :active are the same. They are different. When clicked, the button is in the :focus and :active state.

An example:

shell
<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
  where my text just turns red
</button>