8

I have form with autocomplete. My problem is that sometimes styles doesn't set in form input (font-size). To reproduce my situation you need form and autocomplete:

  1. Fill email and password;
  2. Save form by clicking key icon on right side of address input of browser;
  3. Submit form;
  4. Reload page.

Sometimes when page loaded with autocompleted data styles for input set only when i click on any place on page;

In Google Chrome Version 75.0.3770.142 (Official Build) (64-bit) it happened not very often. About in 25 % cases. But this issue very good see in beta version of Chrome - Version 77.0.3861.0 (Official Build) canary (64-bit) - 100% cases.

I tried:

  • inline styles,
  • styles with !important,
  • pseudoselectors(input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus)

Nothing helped to set font-size for input.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .input {
            font-size: 24px;
        }
    </style>
</head>
<body>
<form action="#">
    <input type="text" placeholder="Email" class="input" id="email">
    <br>
    <input type="password" placeholder="Password" class="input">
    <br>
    <button type="submit">Submit</button>
</form>
</body>
</html>

Expected Result:

Actual Result

Grzegorz T.
  • 3,903
  • 2
  • 11
  • 24
Forever Youth
  • 165
  • 9
  • 1
    I checked on IE edge, ie 11, chrome canary 77, opera, firefox, vivaldi and everywhere it looks like the expected result. – Grzegorz T. Jul 24 '19 at 15:14
  • 1
    I'm having the same issue. I hope there's a resulution found here becasue I need it too. – cpcolella Jul 25 '19 at 21:37
  • 1
    Possible duplicate of [How to prevent Chrome from changing font when autofilling username/password?](https://stackoverflow.com/questions/56026043/how-to-prevent-chrome-from-changing-font-when-autofilling-username-password) – Thibaud Colas Aug 06 '19 at 15:35

2 Answers2

0

Just change the padding of input.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .input {
            font-size: 24px;
            padding: 30px;
        }
    </style>
</head>
<body>
<form action="#">
    <input type="text" placeholder="Email" class="input" id="email">
    <br>
    <input type="password" placeholder="Password" class="input">
    <br>
    <button type="submit">Submit</button>
</form>
</body>
</html>
Soumya
  • 147
  • 9
0

Adding this in the <style> will set the font size of autofill text in <input>

input:-webkit-autofill::first-line {
        font-size: 24px;
}
Mayank Chaudhary
  • 3
  • 3