我已经附上了下面的 StackBlitz。
简而言之,我正在尝试做以下两件事:
CSS (层叠样式表)
https://stackblitz.com/edit/angular-dgx3pe
我试图实现的是,当点击标签元素时,它应该聚焦于输入框。因此,input:focus类被激活。我相信这可以通过JavaScript / jQuery来实现。但我更喜欢使用Angular的方式来实现这一点。简而言之,我正在尝试做以下两件事:
- 当单击标签时,将焦点放在输入元素上。
- 当焦点转移到另一个输入元素并且前一个元素不为空(如果键入了某些值),则标签应保持其位置在顶部。
<input class="input" type="text">
<label class="label">Name</label>
<div>
<input class="input" type="text">
<label class="label">Name</label>
</div>
CSS (层叠样式表)
p {
font-family: Lato;
}
.input
{
border:none;
border-bottom:1px solid grey;
outline:none;
margin-top:20%;
}
.input:focus
{
border-bottom:1px solid orange;
}
.label
{
position:relative;
left:-170px;
}
.input:focus + .label
{
bottom:20px;
}