Related Articles

Related Articles

CSS | :focus Selector
  • Last Updated : 21 Dec, 2018

The :focus Selector is used to target the focused element. This selector work on User Input elements.

Syntax:

:focus {
  //property
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <style>
        input:focus {
            background-color: limegreen;
        }
    </style>
</head>
  
<body>
    <h3>Fill this form</h3>
    <form>
        Full name:
        <input type="text" placeholder="Enter Name" name="name">
        <br> User Id:
        <input type="text" placeholder="Enter Username" name="uid">
        <br> Password:
        <input type="password" placeholder="Enter Password" name="pass">
        <br>
        <button type="button" onclick="#">Sign Up</button>
    </form>
  
</body>
  
</html>

chevron_right


Output:

Supported Browsers:

  • Google Chrome 4.0
  • Edge 8.0
  • Firefox 2.0
  • Safari 3.1
  • Opera 9.6
  • My Personal Notes arrow_drop_up
    Recommended Articles
    Page :