CSS AutoComplete font size

Last Updated : 26 Sep, 2023

In this article, we will learn about How we can set custom CSS AutoComplete Font Size. AutoComplete Font Size refers to the font size of the autocomplete text suggested by the browser. These suggestions are made on the basis of the data entered in the input box in the past.

However, there is no official property given to set custom autocomplete font sizes but we can modify the input suggestion using another styling method along with browser-specific CSS properties.

Syntax

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    border: 1px solid green;
    -webkit-text-fill-color: green;
    -webkit-box-shadow: 0 0 0px 1000px #000 inset;
    zoom: 2;
}

Note: This method works on Google Chrome.

Approach

The approach to set AutoComplete font size involves.

Using browser-specific classes like -webkit/-moz/-ms and -autofill to style suggestion input.
Use the zoom property to enlarge the visible input.

Example: This example uses -webkit-autofill class and zoom CSS property to show the enlarged input suggestion in the input box.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title> 
        CSS AutoComplete FontSize 
    </title> 
    <style> 
        body { 
            background: #333; 
            color: #fff; 
            display: flexbox; 
            font-family: "Lato"; 
            font-size: 2em; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        input:-webkit-autofill, 
        input:-webkit-autofill:hover, 
        input:-webkit-autofill:focus { 
            border: 1px solid green; 
            -webkit-text-fill-color: green; 
            -webkit-box-shadow: 0 0 0px 1000px #000 inset; 
            zoom: 2; 
        } 
  
        form { 
            padding: 50px 0; 
            width: 50%; 
        } 
    </style> 
</head> 
  
<body> 
    <div> 
        <h1> 
            GeeksforGeeks 
        </h1> 
  
        <form> 
            <label for="name"> 
                Name 
            </label> 
            <input type="text" 
                   name="name" 
                   id="name" 
                   autocomplete="name" /> 
            <br /> 
            <label for="email"> 
                Email 
            </label> 
            <input type="email" 
                   name="email"
                   id="email"
                   autocomplete="email" /> 
            <br /> 
            <button type="submit"> 
                Submit 
            </button> 
        </form> 
    </div> 
  
</body> 
  
</html>