如何解决如果输入具有伪=“-内部输入建议”的样式
使用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=" ">
<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,
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。