Open In App

CSS :autofill pseudo-class Selector

Improve
Improve
Like Article
Like
Save
Share
Report

The CSS :autofill pseudo-class refers to an input element that had its value automatically filled by the browser, such as when a user saves their form data for future use. The :autofill pseudo-class can be used to style the appearance of an input element that has been auto-filled, to indicate to the user that their previously saved data has been loaded into the form.

Syntax:

input:autofill {
   /* styles for input when it's autofilled */
}

Example 1: The following example shows how to use the :autofill pseudo-class to change the border of a text field to a “green” color that has been autocompleted by the browser. The email field has border-color green as it is autofilled. For the best browser compatibility, we have used both -webkit-autofill and :autofill.    

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>CSS :autofill Selector</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
          
        label {
            display: block;
            margin-top: 1em;
        }
  
        input:autofill {
            border: 3px solid green;
        }
          
        input:-webkit-autofill {
            border: 3px solid green;
        }
        h1 span{
            color: green;
        }
        h3{
            text-align: center;
        }
    </style>
</head>
   
<body>
    <form>
        <h1><span>GeeksforGeeks</span></h1>
        <h3>CSS autofill selector</h3>
        <p><b>Login</b></p>
        <label for="name">Name</label>
        <input name="name" type="text" 
               autocomplete="name">
      
        <label for="email">Email Address</label>
        <input name="email" type="email" 
               autocomplete="email">    
    </form>    
</body
</html>


Output:

 

Example 2: The following example shows how to use the :autofill pseudo-class to change the font family of a text field that has been autocompleted by the browser. The email field has a different font family than the name field as it is autofilled.

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>CSS :autofill Selector</title>
    <style>
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
          
        label {
            display: block;
            margin-top: 1em;
        }
  
        input:autofill {
            font-family: cursive;
        }
          
        input:-webkit-autofill {
            font-family: cursive;
        }
        h1 span{
            color: green;
        }
        h3{
            text-align: center;
        }
    </style>
</head>
   
<body>
    <form>
        <h1><span>GeeksforGeeks</span></h1>
        <h3>CSS autofill selector</h3>
        <p><b>Login</b></p>
        <label for="name">Name</label>
        <input name="name" type="text" 
               autocomplete="name">
      
        <label for="email">Email Address</label>
        <input name="email" type="email" 
               autocomplete="email">    
    </form>    
</body
</html>


Output:

 



Last Updated : 21 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads