当隐藏的用户名输入字段上方有一个活动输入字段时，如何提示 Google 智能锁使用特定的输入字段作为用户名

Question

这是一个与此类似的问题 如何提示谷歌智能锁使用特定的输入字段作为网站中的用户名.

为该问题提供的解决方案对我的情况并不真正有效。我的用例不同，隐藏的用户名字段上方有一个额外的活动输入字段。谷歌智能锁将从活动输入字段中获取值，而不是我隐藏的用户名输入字段

这是Chromium Design文档，讨论Google Smart Lock将使用display: none用户名，但它没有提到我的用例。

div {
margin: 3px;
}
#email {
display: none;
}

<form>
<div>
<label>Verification Code</label>
<input type='text' />
</div>
<div>
<input type='email' autocomplete='username' id='email' />
</div>
<div>
<label>Password</label>
<input type='password' autocomplete='new-password' />
</div>
<input type="submit" value="Verify">
</form>

Answer 1

简短的回答，首先输入隐藏的电子邮件输入，然后使用CSS颠倒顺序：

.flex-container {
display: flex
flex-direction: row;
}

查看这篇文章，其中解释了如何在 Chrome、Firefox 和 Safari 上针对 3 种不同情况使其工作：正常登录、用户名首次登录和重置密码页面，首先输入验证。