Difference between :focus and :active selector

:focus Selector: It generally applies on form elements or elements that can be focused using keyboard or mouse like input box, textarea. An element is in focus state while we use “tab” key of keyboard for that particular element. The state of focus will be same until user switch tab to another element or click. Syntax:

:focus {
    // CSS Property
}

Example: This example illustrates the :focus selector. 

Output

• Before focusing the button:
• After focusing the button:

Explanation: In the above example, use following CSS property to set the :focus selector.

button:focus {
    color: green;
    background-color: white;
    font-style: italic;
}

These CSS property is used to set the style of button.

• Color of the text will be changed to green.
• Background-color of button will be changed to white.
• Font-style will be changed to italic from normal.

active: It generally applies on button and anchor tags. It triggers when the user clicks the mouse. The state of active will be the same until the user holds down the mouse. Syntax:

:active {
    // CSS property
}

Example: This example illustrates the :active selector. 

Output

• Before active state (before clicking the button):
• After clicking the button:

Explanation: In the above example, use following CSS property to set the :active selector.

button:active {
    background-color: green;
    font-family: 'Courier New', Courier, monospace
}

With these lines of code we are changing the styling of button on focusing.

• Background-color of button will be changed to Green.
• Font-family will be changed.