CSS AutoComplete font size

问题

I couldn't figure out how to increase or how to use the default font size for the preview text when hovering a autocomplete suggestion from the browser.

I'm using https://tailwindcss.com/ for all styles.

E.g.:

This is my normal input element with the default font size after entering some text:

And this is the font size of the preview when I hover one of the suggested autocomplete items:

As you can see, the font size is much smaller than from the first image.

I'm already using some CSS-snippet to disable all browser-specific stylings:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: inherit;
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: inherit;
  transition: background-color 5000s ease-in-out 0s;
  font-size: inherit;
}

The last property font-size does nothing.

I'm using the following css for the input font-size:

    font-size: 1.125rem !important;

I also tried it to assign the font-size as inline-style to fix it, but it doesn't work as well:

Live example: https://codesandbox.io/s/o766kp4z05 Use the example and try to enter your email into the email field and look at the font size. It has the same problem with the font size.

Is it possible to fix the font size?

Best regards, Patrick

回答1:

Overwriting user-agent styling can sometimes be tricky. I found this article which talks about styling input autocompletes (https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/) but it is a very similar snippet to what you are already using and it does not solve the issue you asked about. I'm afraid it may be one of the couple of parts of native elements that we are currently unable to style.

Another similar issue is that if you have a fixed background image set for the input element, an icon of a lock set to the edge for a password field for instance, and then you use the autocomplete feature for the form, the background image will completely disappear and there is nothing that can be done to fix it currently. Just one of the things we have to deal with and tell clients that it's not possible.

回答2:

Seems the font size is overriding. Can you try with the styles with more hierarchical parent approach?

回答3:

Inherit keyword which you used for font-size, specifies that a property should inherit its value from its parent element. so first solution is to change parent element's font-size, second solution is to use a value instead of inherit. For example, 16px, 1em, and etc.

.parent{
  font-size:16px
}
/* first solution 
.name,
.child{
    font-size: inherit;
    width: 250px;
    height: 24px;
    line-height: 24px;
    padding: 5px;
}
.child:hover{
  font-size:inherit;
}
*/

/* second solution */

.name,
.child{
    font-size: 24px;
    width: 250px;
    height: 24px;
    line-height: 24px;
    padding: 5px;
}
.child:hover{
  font-size:24px;
}

<div > 
  <span class="name">Name:</span>
  <span class="parent">
    <input type="text" class="child">
  </span>
</div>

来源：https://stackoverflow.com/questions/57195620/css-autocomplete-font-size

标签

css

input

autocomplete

font-size

tailwind-css