CSS AutoComplete font size Last Updated : 28 Apr, 2025 Comments Improve Suggest changes Like Article Like Report 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. Syntaxinput:-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> Output: Comment More infoAdvertise with us Next Article CSS AutoComplete font size N nikhilgarg527 Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads Primer CSS Autocomplete Primer CSS is a free open-source CSS framework that's created upon systems that make the insights of the essential style elements like spacing, typography, and color. This methodical system makes sure its patterns are steady and interoperable with every other. It's largely reusable and adaptable. Â I 3 min read Primer CSS Autocomplete Suggester Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read How to Create an Autocomplete using CSS? Autocomplete is a feature that suggests possible completions for an input field as the user types, typically seen in search boxes. It enhances user experience by providing real-time suggestions and helping users find what they're looking for faster and more efficiently. ApproachCreate the basic webp 3 min read jQuery UI Autocomplete classes Option jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Autocomplete classes option is used to add some extra classes to add the styles to the elements. Syntax: $( ".selector" 1 min read CSS font-size-adjust Property The font-size-adjust property in CSS is used to adjust the font size based on the height of lowercase rather than capital letters and gives better control of the font size. It is very useful when the text has given multiple styles and adjusted the font while changing between those styles.Syntax: fon 2 min read Like