如果输入具有伪=“-内部输入建议”的样式

问题描述

使用pseudo="-internal-input-suggested自动填充输入时，是否有可能像聚焦输入时一样执行相同的CSS转换？

在这种情况下，如果输入已自动填充，则它将应用transform: translatey(-23px);。当前，如果输入中有任何自动填充的信息，标签将覆盖输入，只有在您点击body时，输入才会收到focus状态，如以下屏幕截图所示：

* {
  Box-sizing: border-Box;
}

.input__html {
  display: flex;
  flex-direction: column
}

.input__label {
  width: 100%;
  margin: 6px 0;
  position: relative;
  border-radius: 3px;
  color: #868ca0;
}

.input__label .input__span {
  position: absolute;
  font-weight: 700;
  top: 18px;
  padding: 0px 6px;
  left: 6px;
  background: white;
  font-size: 14px;
  color: #868ca0;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  pointer-events: none;
}

.input__label .input__focus {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.input__label input {
  border: 1px solid #e4e4e4;
  background: #ffffff00;
  color: #6f6666;
  font-weight: 700;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  font-family: inherit;
  border-radius: 3px;
  padding: 0px 12px;
  height: 48px;
  font-size: 16px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.input__label input[value]+.input__span,.input__label input:valid+.input__span,.input__label input:not(:placeholder-shown)+.input__span,.input__label input:focus+.input__span {
  -webkit-transform: translatey(-23px);
  transform: translatey(-23px);
  outline: none;
}

.input__label input:focus {
  outline: none;
}

<div class="input__html">
  <label class="input__label">
    <input name="input" type="text" required autocomplete="username" placeholder="&nbsp;">
    <span class="input__span">Name</span>
    <span class="input__focus"></span>
  </label>
</div>

解决方法

解决方案是访问自动完成:-webkit-autofill：

.input__label input:-webkit-autofill + .input__span,.input__label textarea:-webkit-autofill + .input__span,