我在HubSpot页面上嵌入了一个表单。在这种形式上，我试图实现focus标签向上移动的功能。像这样的东西：
form {
display: inline-block;
}
.field {
padding-top: 10px;
display: flex;
flex-direction: column;
}
label {
order: -1;
padding-left: 5px;
transition: all 0.3s ease-in;
transform: translateY(20px);
pointer-events: none;
}
input:focus + label {
transform: translateY(-2px);
}<form class="form">
<div class="field">
<input type="text">
<label>Name</label>
</div>
</form>然而，HubSpot形式标记不可编辑，所有的地方，所以我努力的目标一个label是外面的container的input。请参阅下面的演示：
.hs-form-field {
position: relative;
}
.hs-form-field input, .hs-form-field textarea, .hs-form-field select {
outline: 0;
padding: 15px;
width: 50%;
}
.hs-form-field > label {
position: absolute;
top: 50%;
transform: translate(15px, -50%);
}
.hs-form-field input:focus {
color: red;
}
.hs-form-field input:focus + ~ .hs-form-field > label {
transform: translate(10px, -30px);
}<div class="hs-form-field">
<label>
<span>First name</span>
</label>
<div class="input">
<input type="text" />
</div>
</div>如您所见，在 上focus，我正在尝试针对上述选择器，但是在检查时，没有显示任何内容，所以有些东西不起作用？
:focus-within可能就是你要找的。https://css-tricks.com/almanac/selectors/f/focus-within/
.hs-form-field:focus-within label {
transform: translate(10px, -50px);
}
.hs-form-field {
position: relative;
margin-top: 2rem;
}
.hs-form-field input, .hs-form-field textarea, .hs-form-field select {
outline: 0;
padding: 15px;
width: 50%;
}
.hs-form-field > label {
position: absolute;
top: 50%;
transform: translate(15px, -50%);
transition: 0.3s;
}
.hs-form-field input:focus {
color: red;
}
.hs-form-field:focus-within label {
transform: translate(10px, -50px);
}
.hs-form-field input:focus + ~ .hs-form-field > label {
transform: translate(10px, -30px);
}<div class="hs-form-field">
<label>
<span>First name</span>
</label>
<div class="input">
<input type="text" />
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句