Difference between :focus and :active selector

Last Updated : 21 Feb, 2023

: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.

html

<!DOCTYPE html>
<html>

<head>
    <title>Focus pseudo class</title>
    
    <style>
        div.one{
            margin-left:40%;
            margin-top: 10%;
        }
        h1{
            color: green;
            font-family: Arial, Helvetica, sans-serif;
            letter-spacing: 2px;
        }
        button{
            font-size: x-large;
            padding: 10px;
            border: 2px solid black;
        }
        button:focus{
            color: green;
            background-color: white;
            font-style: italic;
        }
    </style>
</head>

<body>
    <div class="one">
        <h1>GeeksforGeeks</h1>
        
        <button type="submit">
            Focus or Click here
        </button>
    </div>
</body>

</html>

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.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        :active pseudo class
    </title>
    
    <style>
        div.one {
            margin-left:40%;
            margin-top: 10%;
        }
        h1 {
            color: green;
            font-family: Arial, Helvetica, sans-serif;
            letter-spacing: 2px;
        }
        button {
            font-size: x-large;
            padding: 10px;
            border: 2px solid black;
        }
        button:active {
            color:white;
            background-color: green;
            font-family: 'Courier New', Courier, monospace
        }
    </style>
</head>

<body>
    <div class="one">
        <h1>GeeksforGeeks</h1>
        
        <button type="submit">
            Focus or Click here
        </button>
        </div>
</body>

</html>

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.

Difference between :focus and :active selector

shilpiagk

Improve

Article Tags :

Difference between :focus and :active selector

Similar Reads

Thank You!

What kind of Experience do you want to share?