Styling an autofill suggestion

Related searches

Pretty simple: I'm working on the CSS of inputs, but when Chrome (on MacOS) fills the input with a suggestion (autofill feature), it changes the font. Is there a way to override this to keep my custom font and the rest of the CSS properties?

The most disturbing is the fact that the field changes its height, this is really ugly...

Maybe I searched with the wrong keywords, but I didn't find anything...

Here is a quick sample to reproduce it with an email field, I hope you'll have suggestions in your browser:

input#email {
  font-size: 2rem;
  font-family: "Krub";
}
<link href="https://fonts.googleapis.com/css?family=Krub&display=swap" rel="stylesheet">
<input id="email"></input>

Change Autocomplete Styles in WebKit Browsers, If the setting is enabled, then WebKit browsers will style the fields it has Change Autocomplete styles in Chrome*/ input:-webkit-autofill, For example, if you have previously dismissed the autocomplete suggestion in a� Hayneedle’s autocomplete styling includes a distinct font color for category scopes that provides visual contrast from their respective query suggestions (e.g., “Sofa & Loveseats in Furniture”). A horizontal line also separates scoped and unscoped suggestions.

As of now it seems that there's no way to change this in Chrome. I'd definitely call it a bug.

However, a decent workaround is to set the font-family for all autofill-able inputs or inputs within forms that have autofill abilities to this:

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

This is a great cross-browser, cross-platform solution because it just takes whatever your system font is, which is exactly what Chrome seems to be doing for it's autofill font.

It also ensures that your forms are going to have readable fonts on whatever OS your user is using.

Change AutoFill Style with Css, //this code is to change the autofill color, comment this section to see the diference. 2. input:-webkit-autofill {. 3. -webkit-box-shadow: //just styling. 14. form{. 15. The Snippet We can use the -webkit-autofill pseudo-selector to target those fields and style them as we see fit. The default styling only affects the background color, but most other properties apply here, such as border and font-size. We can even change the color of the text using -webkit-text-fill-color which is included in the snippet below.

You can read about changing the autofill styling in CSS Tricks blog.

Essentially, adding the following snippet will allow you to change the font. You can also add any other styling here, as seen in this CodePen demo.

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
    font-family: Times;
}

:-webkit-autofill, The :-webkit-autofill CSS pseudo-class matches when an input element has its value autofilled by the browser. Autofill suggestions usually appear as a drop-down list of options when you double-click on an empty field in an entry form. The suggestions might also be pre-filled when you open a form. The problem is that unwanted autofill suggestions can build up over time.

My best guess is that the Chrome auto-fill text is forced to be 10pt, sans-serif. So if you style your input box the same, it won't visibly change when the page is clicked on.

13 Design Patterns for Autocomplete Suggestions (27% Get it Wrong), Style Autocomplete Suggestions for Readability (mobile specific) Use Text Wrapping for Suggestions (mobile specific) Provide Visual Hints that Autocomplete is Scrollable (mobile specific) Enable Easy Removal of Queries (mobile specific) function autocomplete(inp, arr) { /*the autocomplete function takes two arguments, the text field element and an array of possible autocompleted values:*/

Appearance and Styling | AutoComplete | ASP.NET, Adjusting Suggestion list size. AutoComplete control provides you with a property to define the dimensions of the� The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are tags for programming languages, give "ja" (for Java or JavaScript) a try. The datasource is a simple JavaScript array, provided to the widget using the source-option.

We can target the field by using an ID of #autocomplete. There is no extra HTML because all of the suggestions will be presented using JS codes. One other interesting area is the paragraph using an ID of #outputcontent. This is where we can display the user’s choice once they click on a suggestion.

To use an AutoSuggestBox, you need to respond to 3 user actions. Text changed - When the user enters text, update the suggestion list. Suggestion chosen - When the user chooses a suggestion in the suggestion list, update the text box. Query submitted - When the user submits a query, show the query results.

Comments
  • Are you on about fixing the font change when you hover the autoselect option or when the actual autoselect option is chosen and inputted?
  • @KarlChelton My point is about when I hover the autoselect option: it fills the input but with the wrong font, and the worst is that the font does not have exactly the same size, so it also changes the height of the input...
  • That helps, thank you for your answer! I can't turn off the autocomplete, I'm pretty sure users won't like that. I'll probably end up setting the height of my inputs and this will be all :)
  • Sorry mate, but this does not work. On your codepen link, ok, the background is black and the text is green, but the font is changing. Maybe this is something specific on MacOS, but Chrome adds its own style when I hover a suggestion and the field does not keep my style :(