css - 关注带有 CSS 的输入隐藏标签

Question

我有这个表格：

<div class="c--input">
    <label for="firstname">Firstname</label>
    <input id="firstname" type="text">
</div>

我想删除<label>当用户尝试在输入中插入文本时。

所以我用了这个：

.c--input input:focus + label::before,
.c--input input:active + label::before {
    opacity: 0;            /* To visually hide the label's pseudoelement */
    pointer-events: none;  /* To prevent any cursor-based interaction */
}

为什么它不起作用？

谢谢。

标签： cssforms

Answer 1

请尝试此操作以通过显示无显示或激活隐藏并通过显示内联显示

.c--input  label{
  display: inline-block;
}
div input:active + label,
div input:focus + label {
   display: none;
 }