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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>                    

chevron_right


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.


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.