单击标签后显示输入

Question

我有这个代码

.input {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  height: 50px;
  justify-content: flex-end;
}

.input > * {
  padding: 5px;
}

#login {
  visibility: hidden;
  height: 0px;
  transition: .2s
}

#login:active {
  visibility: visible;
  height: 10px;
}

<div class="input">
  <label for="login" id="login1">Login</label>
  <input type="text" id="login">  
</div>

点击标签后我需要输入显示.但是只有当我按住鼠标按钮时它才有效.有没有办法在不使用JS的情况下点击输入？

Answer 1

你可以使用焦点伪类
我也添加了必需的属性和:有效输入所以当它不为空时它保持高度

.input {
  display: flex;
  flex-direction: column;
  border: 1px solid #000;
  height: 50px;
  justify-content: flex-end;
}

.input > * {
  padding: 5px;
}

#login {
  visibility: hidden;
  height: 0px;
  transition: .2s
}

#login:active, #login:focus, #login:valid {
  visibility: visible;
  height: 10px;
}

<div class="input">
  <label for="login" id="login1">Login</label>
  <input type="text" id="login" required>  
</div>