我在html中有一个如下所示的输入框,它的工作正常:
.lolan:placeholder-shown+.form__label {
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(-4rem);
transform: translateY(-4rem);
}
<input class="lolan" type="text" id="name" placeholder="Full Name" required />
<label for="name" class="form__label">Click "Download" To Get Your Card</label>
当用户键入文本时,将显示标签。现在,我在输入框s上方添加了一个标签,它将在填充输入框之前显示,并在填充输入框之后隐藏。我做了以下代码:
.lolan:placeholder-shown - .form__labell {
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(-4rem);
transform: translateY(-4rem);
}
<label for="name" class="form__labell">Click "Download" To Get Your Card</label>
<input class="lolan" type="text" id="name" placeholder="Full Name" required />
这不起作用,任何人都可以告诉我这里出了什么问题
相邻的同级组合器为+
,一般的同级组合器为~
:没有像-
您可以像第一个示例中一样保留标记中元素的顺序,但是使用flexbox
和order
属性将它们反转
div {
display: flex;
}
input { order: 2 }
label { order: 1 }
input:not(:placeholder-shown) + label {
opacity: 0;
visibility: hidden;
-webkit-transform: translateY(-4rem);
transform: translateY(-4rem);
}
<div>
<input class="lolan" type="text" id="name" placeholder="Full Name" required />
<label for="name" class="form__labell">Click "Download" To Get Your Card</label>
</div>