相关疑难解决方法(0)

我有一个使用用户名和密码输入的登录表单。在Windows上的Chrome（其他浏览器或Mac上不会发生）中，当将鼠标悬停在Chrome密码管理器中保存的用户名上时，字体会更改。然后，更改字体会更改输入的宽度，从而使我的对齐方式毫无用处。

显然，我可以为输入设置固定宽度以保存对齐方式，但这并不能真正解决问题，只需在其上放置一个创可贴即可。我真正想要的是首先防止字体更改。

我尝试将输入作为目标输入，:-webkit-autofill然后将!important输入的所有CSS都放到上面，以查看是否有东西粘住但没有骰子。

Codepen 在这里。您需要使用Windows上的Chrome浏览器，并使用Google的密码管理器。

HTML：

<form>
    <label>
        <input type="text" name="username" placeholder="Username" required />
    </label>
    <label>
        <input type="password" name="password" placeholder="Password" required />
    </label>
  <button type="submit">Login</button>
</form>

SCSS：

// setting font for more exaggerated difference
* {
  font-family: Times, "Times New Roman", serif;
}

// why doesn't this or anything else work?
input {
  &:-webkit-auto-fill {
    &,
    &:hover,
    &:focus {
    font-family: Times, "Times New Roman", serif !important;
    }
  }
}

关于防止这种字体更改的任何线索将不胜感激！

当悬停来自浏览器的自动完成建议时，我不知道如何增加预览文本的大小或如何使用默认字体大小。

我正在将https://tailwindcss.com/用于所有样式。

例如：

这是我在输入一些文本后使用默认字体大小的普通输入元素：

当我将鼠标悬停在建议的自动完成项之一上时，这是预览的字体大小：

如您所见，字体大小比第一张图片小得多。

我已经在使用一些CSS代码段来禁用所有特定于浏览器的样式：

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;
}

最后一个属性font-size不执行任何操作。

我正在使用以下CSS作为输入字体大小：

    font-size: 1.125rem !important;

我也尝试过将字体大小指定为内联样式来修复它，但是它也不起作用：

实时示例：https : //codesandbox.io/s/o766kp4z05 使用该示例，尝试将您的电子邮件输入到电子邮件字段中并查看字体大小。字体大小也有同样的问题。

可以固定字体大小吗？

最好的问候，帕特里克

非常简单：我正在处理输入的CSS，但是当Chrome（在MacOS上）使用建议（自动填充功能）填充输入时，它将更改字体。有没有一种方法可以覆盖此设置，以保留我的自定义字体和其余CSS属性？

最令人不安的是，场地改变了高度，这确实很丑。

也许我搜索了错误的关键字，但什么也没找到...

这是一个通过电子邮件字段重现它的快速示例，希望您在浏览器中有建议：

input#email {
  font-size: 2rem;
  font-family: "Krub";
}

<link href="https://fonts.googleapis.com/css?family=Krub&display=swap" rel="stylesheet">
<input id="email"></input>

谢谢！

我使用的是最新版本的Chrome（74.0.3729.169），发现有些令人沮丧/有趣的东西。

在下面的示例中，开始输入您之前使用的电子邮件地址。Chrome的建议显示后，将鼠标悬停在其中一项上。注意输入的减少幅度。

input { padding: 5px; border: 1px solid #ccc; }

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

对于无法重新创建行为，我深表歉意，但是现在我已经能够在多台计算机上使用此代码段重新创建该行为，因此，我非常有信心这样做。

另外（在这里将我的脚趾稍微浸入Meta中）在StackOverflow自己的登录屏幕上有一个相当生动的示例，其结果是整个表单缩小了。

比较下面两个图像的宽度。或者，在第二个图像中，将“建议”的宽度与其对应的输入进行比较。

通过检查输入本身，我看不到任何可以解释这种行为的新样式。它似乎与padding两者都不相关，因为没有充分padding展示这种行为的输入。

我的问题有两个方面：为什么将建议悬停在输入上会导致输入收缩，并且除了固定宽度或完全禁用建议之外，是否有其他方法/解决方法来防止这种情况？