When Do You Use :focus and :active Pseudo-Classes?

Distinguishing between :focus and :active Pseudo-Classes

While both :focus and :active style states can be activated through user interaction, their functionality differs significantly.

:focus

• Represents an element that has received input focus and is ready to accept user input.
• Active when an element is selected using keyboard navigation, such as the tab key.

:active

• Represents an element being actively clicked or tapped by the user.
• Often accompanies the :focus state when an element receives focus through a click.

Key Differences

• :focus indicates that an element has been selected for input, while :active implies that a click or tap action is in progress.
• :focus is triggered by keyboard-based interaction, whereas :active is triggered by mouse or touch-based events.
• When an element is clicked, it typically transitions through both :focus and :active states.

Example

Consider the following HTML and CSS code:

<button>
  Click to Change Color
</button>

<style>
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

When the button is initially rendered, it has no active or focus state. When the user uses Tab to give it focus, it enters the :focus state and the text turns red. If the user then clicks the button, it enters the :active state, causing the text to turn red and bold.

The above is the detailed content of When Do You Use :focus and :active Pseudo-Classes?. For more information, please follow other related articles on the PHP Chinese website!