0

I have a input field:

<input class="text-field__input" type="text" id="user-subject" name="user-subject" placeholder="Subject" required="" aria-label="Enter your Subject">

It has a monospace font. I click with the cursor on this input (Chrome browser), and get a list with hints. But hints haves another font:

enter image description here

And when I hover on one hint, it autocompletes the field with another font:

enter image description here

But when I select this option, text that autocomplete the field become monospace:

enter image description here

Is there some option to change a font for autocomplete?

Oleksii Binetskyi
  • 65
  • 5
  • 1
    Are these autocomplete hints something in your code, or native browser functionality? Can you provide a [mcve] which demonstrates? – David Apr 21 '23 at 12:12
  • You can check this blog (https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/) – mr.Hritik Apr 21 '23 at 12:22

1 Answers1

0

the styling of auto complete dropdown list is ultimatly up to the browser. however you can try to use the pseudo element ::partto style the shadow DOM. however note that this doesn't work with all browser especially old one. as the styling of auto complete lists is up to the browser.

Azzedine Bk
  • 41
  • 5