浏览器自动填充建议框重叠浮动标签输入字段

Question

我的表单设计带有浮动标签，Edge 和 Chrome 自动填充建议框存在问题。单击输入字段后，它会向下移动 30 像素 (margin-top) 以便为标签腾出位置。
问题是自动填充建议 select 框不会向下移动那 30px，它会覆盖输入字段 ()。

当我再次点击输入框时，它会像我想要的那样向下移动。

现在我的问题是：是否可以将浏览器建议框向下移动到输入旁边，或者模拟对输入的第二个焦点以刷新自动填充框位置。

编辑

意见箱不是DOM内容的一部分，不能直接改。这并不奇怪。
我要问的是，在我的输入完成动画后，是否有任何已知的解决方法可以让它移动到正确的位置。浮动标签很常见，我是第一个遇到这个问题的吗？
意见框的位置只需要刷新，手动点击输入框第二次就可以了，但是真的没有干净的自动化方式吗？

如果真的没有，我清楚地认为这是一个浏览器错误，因为建议框在错误的位置完全显示。浏览器是否已经存在一个问题，要求他们在移动时也将建议框放在输入字段的正下方（或上方）？ “关注”输入字段没有意义吗？

Answer 1

我的自动完成建议仅在输入具有名称属性时弹出。这让我想知道我是否可以在 transitionend 之后通过注入 name 属性（使用标签的 htmlFor 属性）来触发它。它有效，但需要第二次点击才能触发建议。

我知道这不是一个完美的答案，但希望它能让人们更接近更好的解决方法。

const inputgroups = document.querySelectorAll('.form-input-group');

inputgroups.forEach( inputgroup => {
  inputgroup.addEventListener('transitionend', (e) => {
    if(e.propertyName === "transform") {
      const input = e.target.previousElementSibling
      label = e.target.htmlFor
      if(input.name) {
        input.name = '';
        input.autocomplete = '';
      } else {
        input.name=label;
        input.autocomplete= label;
      }
    }
  })
})

.form-input-group input:valid~label {
  transform: translate(0, -200%);
}

.form-input-group input:valid {
  margin-top: 30px;
}

.form-input-group input:focus~label {
  transform: translate(0, -200%);
}

.form-input-group input:focus {
  outline: none;
  background: #ff4a56;
  color: white;
  margin-top: 30px;
}

.form-input-group label,
.form-input-group input {
  transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}

.form-input-group {
  position: relative;
  padding: 10px 0;
}

.form-input-group:first-of-type {
  padding-top: 0;
}

.form-input-group:last-of-type {
  padding-bottom: 0;
}

.form-input-group label {
  transform-origin: left center;
  color: #ff4a56;
  font-weight: 100;
  letter-spacing: 0.01em;
  font-size: 17px;
  box-sizing: border-box;
  padding: 10px 15px;
  display: block;
  position: absolute;
  transform: translate(0, -100%);
  z-index: 2;
  pointer-events: none;
}

.form-input-group input {
  appearance: none;
  background-color: none;
  border: 1px solid #ff4a56;
  line-height: 0;
  font-size: 17px;
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 10px 15px;
  border-radius: 60px;
  color: #ff4a56;
  font-weight: 100;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 1;
}

<form action="" method="get">
  <div class="form-input-group">
    <input type="text" required/>
    <label for="given-name">First Name</label>
  </div>
  <div class="form-input-group">
    <input type="text" required/>
    <label for="family-name">Last Name</label>
  </div>
  <div class="form-input-group">
    <input type="text" required/>
    <label for="email">Email Address</label>
  </div>
  <div class="form-input-group">
    <input type="password" required/>
    <label>Email Confirm</label>
  </div>
</form>

浏览器自动填充建议框重叠浮动标签输入字段

Browser autofill suggestion box overlapping floating label input field

css

chromium

microsoft-edge-chromium

编辑