为什么在 left:0
绝对定位的时候标签上有空隙?
尝试重新创建类似于 Material Design 的 UI。我尝试过使用 translateY(-6px)
或其他方法,但这对于具有更多字符的标签来说不是动态的。
.formField {
position: relative;
height: 40px;
}
.form {
position: absolute;
bottom: 0;
left: 0;
height: 40px;
}
.label {
position: absolute;
top: 0;
left: 0;
transform: translate(0, 24px) scale(1);
transition: all .3s ease-in;
}
input {
position: absolute;
bottom: 0;
left: 0;
}
input:focus+.label {
transform: translate(0, 1.5px) scale(.75);
}
<div class="formField">
<form class="form">
<input type="text" class="name" />
<label for="name" class="label">Hello</label>
</form>
</div>
最佳答案
By default, the origin of a transform is "50% 50%", which is exactly in the center of any given element.
尝试将 transform-origin: bottom left;
添加到您的 .label
.formField {
position: relative;
height: 40px;
}
.form {
position: absolute;
bottom: 0;
left: 0;
height: 40px;
}
.label {
position: absolute;
top: 0;
left: 0;
transform-origin: bottom left;
transform: translate(0, 24px) scale(1);
transition: all .3s ease-in;
}
input {
position: absolute;
bottom: 0;
left: 0;
}
input:focus+.label {
transform: translate(0, 1.5px) scale(.75);
}
<div class="formField">
<form class="form">
<input type="text" class="name" />
<label for="name" class="label">Hello</label>
</form>
</div>
关于html - 输入事件状态下标签转换的意外行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53163418/