Input Text Very Small When Hovering on Autofill Suggestion

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.

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

Hovering a Chrome field-suggestion shrinks input

What you are facing is related to :-webkit-autofill pseudo class that is applying some default styling to the input with an autocomplete.

The :-webkit-autofill CSS pseudo-class matches when an element has its value autofilled by the browser.

Unnfortunately, I am not able to find where exactly those styles are defined but here is an example to confirm this. If you try to use the same value of width you will avoid the shrink effect:

:-webkit-autofill {  width: 173px;}

<input id="email" name="email" type="text" placeholder="Email">

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.

Removing input background colour for Chrome autocomplete?

You can change input box styles as well as text styles inside input box:

Here you can use any color e.g. white, #DDD, rgba(102, 163, 177, 0.45).

But transparent won't work here.

/* Change the white to any color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

Additionally, you can use this to change the text color:

/*Change text in autofill textbox*/
input:-webkit-autofill{
    -webkit-text-fill-color: yellow !important;
}

Advice: Don't use an excessive blur radius in the hundreds or thousands. This has no benefit and might put processor load on weaker mobile devices. (Also true for actual, outside shadows). For a normal input box of 20px height, 30px ‘blur radius’ will perfectly cover it.

:hover stops after hovering autocomplete field

Here is a Jquery Solution.

HTML CODE

<div class="login"> <span>Login</span>

    <div class="login_form">
        <label for="email">Email:</label>
        <input type="text" id="email" name="email" value="" />
    </div>
</div>

CSS CODE

.login {
    position: relative;
    height:60px;
    width:50px;
    margin:30px;
}
.login > span {
    cursor: pointer;
}
.login_form {
    box-shadow: 0 0 1px;
    padding:10px;
    position: absolute;
    left: 0px;
    top: 30px;
    z-index: 9999;
    display: none;
}

JQUERY CODE

$('.login').on('mouseover', function () {
    $('.login_form', this).show();
}).on('mouseout', function (e) {
    if (!$(e.target).is('input')) {
        $('.login_form', this).hide();
    }
});

---

Related Topics