具有输入焦点的浏览器自动填充问题

Question

我有一个登录表单，浏览器已为其保存了用户登录详细信息。因此，当我在浏览器中打开此页面时，它显示如下

但是当我单击页面或按任意按钮时

这是预期的默认行为。

我尝试过

document.body.focus()

onload，但这不起作用。

然后我将注意力集中在输入项（名称）上，但是其他字段呢？最好的解决方案是什么？

我知道这种花哨的样式不好，但是有解决方法吗？

Answer 1

我使用React和Styled Components遇到了这个确切的问题。为了解决此问题，我在样式化组件（是<label>）中使用了以下CSS：

input:-webkit-autofill + &

这可以通过检查输入中是否自动填充并应用我们期望的样式（如果为true）来实现。

注意：您可能需要将&替换为input。

Answer 2

您需要将 active 类添加到“登录”表单中的元素：

例如：

<input id="password" placeholder="Password" name="password" type="password" class="active">

或将以下代码段添加到css：

input:-webkit-autofill { +label { @extend .active; } } }`

让我知道这是否有效， 谢谢。

Answer 3

尝试一下

.login-form{

  width: 50%;
  }

form div{
padding: 10px;
}

form div label, form div .fa{
color: blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<form class="login-form text-center">
    <h4>Sign in</h4>

 
    <div class="md-form">
        <i class="fa fa-envelope prefix grey-text"></i>
          <label for="materialFormLoginEmailEx">Your email</label><br>
        <input type="email" id="materialFormLoginEmailEx" class="form-control" placeholder="Admin">
      
    </div>

  
    <div class="md-form">
        <i class="fa fa-lock prefix grey-text"></i>
        <label for="materialFormLoginPasswordEx">Your password</label><br>
        <input type="password" id="materialFormLoginPasswordEx" class="form-control" placeholder="Password">
        
    </div>

    <div class="login-btn">
        <button class="btn btn-default" type="submit">Login</button>
    </div>
</form>