Question

我正在尝试为输入设置等宽字体，但是当自动填充启动并且在自动填充下拉菜单选项之间切换时，文本输入的该自动填充状态内的字体系列不会显示为指定的等宽字体，请参考此代码，并将字体系列更改为等宽字体以描述我的问题（我使用的是Chrome btw）： Codepen example by CSS tricks

/* Change autocomplete styles in WebKit */
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: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* PRESENTATIONAL STYLES */
body {
  background: #333;
  color: #fff;
  display: flex;
  font-family: monospace;
  font-size: 3em;
  justify-content: center;
}

form {
  padding: 50px 0;
  width: 50%;
}

<form>
  <div class="form-group">
    <label for="exampleInputFirst">First Name</label>
    <input type="text" class="form-control input-lg" id="exampleInputFirst">
  </div>
  <div class="form-group">
    <label for="exampleInputLast">Last Name</label>
    <input type="text" class="form-control input-lg" id="exampleInputLast">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail">Email Address</label>
    <input type="email" class="form-control input-lg" id="exampleInputEmail">
  </div>

  <button type="submit" class="btn btn-primary btn-lg btn-block">Submit</button>
</form>

Answer 1

我找不到一种使之完全起作用的方法。绝对是Chrome中的错误。

我想出的最佳解决方法是将此CSS添加到您所有可能自动填充的输入中：

font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;

无论使用什么系统，这都将采用您的系统字体，并将其应用于输入。这也是Chrome的功能，因此，当您将鼠标悬停在自动填充选项上时，字体不会更改。

在这里查看我对类似问题的回答： https://stackoverflow.com/a/56997845/7724517

Answer 2

这是我的部分答复，希望对您有所帮助：

我在Chrome中遇到了同样的问题，我想在自动填充选项悬停时更改输入文本区域内的字体系列，但这似乎是一件事不会改变。

按照CSS技巧教程和您的代码段所述，通过尝试更改WebKit中的自动完成样式，我可以更改边框样式，框阴影样式，甚至是font-weight和{{ 1}}。

因为，我可以在悬停时在文本输入区域内更改字体的其他属性，但是不是 font-style，我被带到了相信这不是Chrome的故意行为，还是Bug。我还注意到CSS技巧上的示例的行为方式相同：font-family是悬停时的默认设置，但是在选中后会切换到Lato。因此，我相信这在Chrome浏览器中是可以预期的。如果我可以找到一些明确的文档，说明不允许font-family在此处进行更改，我会感到更加满意，但这是我能得出的最大结论。

Answer 3

这里的解决方案是input:-webkit-autofill::first-line选择器。

它允许您在将鼠标悬停在自动完成元素上时覆盖默认的系统字体（和字体大小）。

CSS字体系列问题，在文本输入中自动填充

3 个答案: