我有一个带有占位符的输入元素，它应该始终出现
.wrapper {
position: relative;
}
input {
font-size: 14px;
height: 40px;
}
.placeholder {
position: absolute;
font-size: 16px;
pointer-events: none;
left: 1px;
top: 2px;
transition: 0.1s ease all;
}
input:focus~.placeholder {
top: -1px;
font-size: 11px;
}
input[value=""]~.placeholder {
top: -1px;
font-size: 11px;
}
<div class="wrapper">
<input type="text">
<span class="placeholder">E-Mail</span>
</div>
如果输入字段中有任何文本，我希望伪占位符保持较小。一定有什么问题input[value=""] ~ .placeholder选择器，但我不知道。
Use :placeholder-shown但你至少需要有一个空的占位符
.wrapper{
position: relative;
}
input {
font-size: 14px;
height: 40px;
}
.placeholder {
position: absolute;
font-size:16px;
pointer-events: none;
left: 1px;
top: 2px;
transition: 0.1s ease all;
}
input:focus ~ .placeholder{
top: -1px;
font-size: 11px;
}
input:not(:placeholder-shown) ~ .placeholder{
top: -1px;
font-size: 11px;
}
<div class="wrapper">
<input type="text" placeholder=" ">
<span class="placeholder">E-Mail</span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
