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

Question

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

但是当我点击页面或按任何按钮时

这是预期的默认行为。

我试过了

document.body.focus()

onload，但这不起作用。

然后我把重点放在其中一个输入（名字上），但那么其他领域呢？什么是最好的解决方案？

我知道这种花哨的造型并不好，但有解决办法吗？

Answer 1

我使用React和Styled Components来解决这个问题。为了解决这个问题，我在我的样式组件（这是一个<label>）中使用了以下css：

input:-webkit-autofill + &

这通过检查输入中的自动填充并应用我们想要的样式（如果为真）来工作。

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

Answer 2

试试这个

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

Answer 3

您需要在Login窗体中的元素中添加活动类：

例如：

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

或者将下面的代码片段添加到css：

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

如果这有效，请告诉我，谢谢。