Question

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

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

我尝试使用handleNumber = (event) => { this.setState({ nb: event.target.value }) var number = this.state.nb; console.log(number); }定位输入，并将:-webkit-autofill放在输入的CSS上，只是看是否有东西会粘住但没有骰子。

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

HTML：

!important

SCSS：

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

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

Answer 1

尝试一下！

      &:-webkit-autofill::first-line,
      &:-webkit-autofill,
      &:-webkit-autofill:hover,
      &:-webkit-autofill:focus,
      &:-webkit-autofill:active {
        font-family: Times, "Times New Roman", serif !important;
      }

尽管您可能只需要这个

     &:-webkit-autofill::first-line

其他只是为了防伪

Answer 2

如何在输入中更改Chrome自动完成样式：

input {
...
font-family: $body-font;
font-size: 1rem;
font-weight: bold;
color: #000;
background-color: #fff;
  
// Background color
&:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
}
  
// Font styles
&:-webkit-autofill::first-line {
  font-family: $body-font;
  font-size: 1rem;
  font-weight: bold;
  // color: green;
}

}

Answer 3

以下是 2021 年对我有用的有效解决方案，可防止 Chrome 更改密码/用户名输入字段上的字体：

Sub Teste_Array()

'Strings and paths definition
Dim Planilha() As Variant
Planilha = Array("03 - CONCRETO.xlsx", "04 - ALVENARIA.xlsx", "05 - METAIS.xlsx", "06 - MADEIRAS, PLÁSTICOS E COMPÓSITOS.xlsx", "07 - ABERTURAS.xlsx", "08 - ACABAMENTOS.xlsx")
Dim Caminho As String
Dim Abrir As String
Dim i As Integer
Dim LinhaFinal As Long

    Caminho = "C:\hd_servidor\8 BIBLIOTECA\3 REVIT\TEMPLATE\CATEGORIZAÇÃO\"

'Cancel animations for faster process
    Application.ScreenUpdating = False
    Application.EnableEvents = False
 
'Clear Contents of current compilation
        ThisWorkbook.Worksheets("TESTE").Activate
        LinhaFinal = Cells(Rows.Count, 1).End(xlUp).Row
        Range("A1:C" & LinhaFinal).ClearContents
 
'Loop, Copy and Paste to Compilation

    For i = 0 To 5
        Abrir = Caminho & Planilha(i)
        Workbooks.Open (Abrir)
    
        LinhaFinal = Cells(Rows.Count, 6).End(xlUp).Row
        Range("E2:G" & LinhaFinal).Copy
        ThisWorkbook.Worksheets("TESTE").Activate
        LinhaFinal = Cells(Rows.Count, 1).End(xlUp).Row
        Range("A" & LinhaFinal).PasteSpecial xlPasteValues
        Application.CutCopyMode = False
        Workbooks(Planilha(i)).Close
        
    Next i

        
'Animations Back
Application.ScreenUpdating = True
Application.EnableEvents = True

End Sub

input#username {
  font-family: "Rubik";
  font-weight: bold;
  color: blue;
}

input:-webkit-autofill::first-line {
      color: red;
      font-family: "Rubik"; 
      font-weight: bold;
}

我还注意到由于某种原因 <link href="https://fonts.googleapis.com/css?family=Rubik&display=swap" rel="stylesheet"> <input id="username" name="username"></input> 与该代码冲突，请看：

display: flex

input#username {
  font-family: "Rubik";
  color: blue;
  font-weight: bold;
  display: flex;
}

input:-webkit-autofill::first-line {
      color: red;
      font-family: "Rubik";
      font-weight: bold;
}

Answer 4

我不在Windows上运行，但是您是否也尝试过定位标签和表单？回复：CSS的特异性。然后在所有

上尝试使用Web-kit自动填充

Answer 5

这似乎是Chrome中的最新错误：Issue 960918: Autofill inputs change size on preview。据我所知，这种情况在macOS和Windows上均会发生，向最终用户展示自动填充的任何地方。

目前似乎没有一种方法可以覆盖这些新样式-如果样式更改确实太令人讨厌，则可以禁用自动填充（Disabling Chrome Autofill）或设置字段的字体样式（ font-family，font-weight，font-style，font-size以匹配Chrome浏览器自动填充建议的建议–如此处建议的https://stackoverflow.com/a/56997845/1798491）

自动填充用户名/密码时，如何防止Chrome更改字体？

5 个答案: