Input text very small when hovering on autofill suggestion
There is a solution:
input:-webkit-autofill::first-line {font-size: 16px}
Styling an autofill suggestion
The non-standard chained pseudo-classes :-webkit-autofill:focus
can be used to style focused input elements being autofilled in Chrome.
It appears however that Chrome is ignoring some properties affected to :-webkit-autofill:focus
, such as color
and font-family
. The color of the text can be changed through the (non-standard) property -webkit-text-fill-color
, but there is no other property that can be used to change the font of the text.
A solution could have been to use JavaScript to copy the hovered suggestion, append it to a new element, place that element on top of the input and style it as you want. This is not possible though, as the suggestions are not injected as input value, and the content of the select input added by Chrome is not accessible either (probably both for security reasons).
You can however mitigate the issue by either:
- preventing Chrome from autocompleting by setting
autocomplete="off"
on the input element; - setting height and width to the input to prevent it from changing size as the user hovers suggestions.
Hope that helps.
CSS font family issue with autofill within a text input
Here is my partial answer in hopes of helping:
I am having the same problem in Chrome, where I would like to change the font-family inside the input text area on hover of the auto-fill options, but it seems like it's the one thing that won't change.
From my experimenting with changing the autocomplete styles in WebKit, as described in the CSS tricks tutorial and in your code snippet, I can change the border styles, the box-shadow styles, even the font-weight
and font-style
.
Because I am able to change the other properties of the font inside the text input area on hover, but not the font-family
, I'm led to believe that this is either intentional or a bug by Chrome. I also noticed the example on CSS tricks behaves the same way: the font-family is the default on hover, but switches to Lato after it's selected. So, I believe this is expected with Chrome. If I could find some explicit documentation that font-family
is not allowed to be changed here, I would be more satisfied, but this is the most I could conclude.
Adjust font size for Autocomplete Dropdown in MUI
One solution is to override CSS rule option
(doc)
<Autocomplete
classes={{
input: classes.autoComplete,
option: classes.autoComplete
}}
// ...
/>
How to prevent Chrome from changing font when autofilling username/password?
try this!
&:-webkit-autofill::first-line,
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
font-family: Times, "Times New Roman", serif !important;
}
you might only need this though
&:-webkit-autofill::first-line
the others are just incase
Related Topics
Can Visual Studio 2013 Generate CSS Files from .Less Files
Get Button Text on to One Line
Calculating Square-Roots with CSS
Best Practice to Manage All Asset Caching (Images, CSS, Js, Everything)
Difference Between Box and Grid in Material-Ui
Sharepoint 2013 Deleting Contents of <Style> in Embed Code When Saving
Gulp SASS - How to Properly Name The Output CSS
CSS How to Position an Element in a Middle (Half Height/Vertical 50%) of Another Element
Selected Text Background Color
Float a Div in Top Right Corner Without Overlapping Sibling Header
Creating a Fuzzy Border in CSS 3
Difference Between Ng-Class and Ng-Style
Bootstrap Container with Position:Absolute Loses Layout Inside
Way to Add Custom Class When Using Ngx-Bootstrap Modalservice
Is There a Working Implementation of CSS3 Grid Layout for Webkit
How to Float a Twitter Bootstrap Navbar Item Right with Either Class=Pull-Right or Float:Right