相关疑难解决方法(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;
    }
  }
}

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

在许多网站上,例如,当输入用户名时,会出现下一个输入显示的下拉菜单,因此用户可以轻松选择内容而不是键入内容.我知道你可以通过让表单或输入具有属性来在浏览器中关闭它autocomplete="off".问题是当我想要它时,输入有填充.下拉列表看起来非常糟糕,因为每个项目都没有填充.

有没有办法用css设计这个样式？我知道您可能会使用javascript/jQuery解决方法将以前的条目存储在cookie或其他内容中并自行创建下拉列表.但我不想依赖javascript.

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

/* 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"> …

如您所见,白盒是我经常使用的用户名.

自动完成框具有白色背景.是否可以将其改为我想要的任何东西？