单击标签后显示输入

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

您可以使用focus伪类
我还添加了required属性和：valid来输入，以便在不为空时保持高度

.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>

Answer 2

您还可以通过添加复选框或单选来使用选中的伪。类似于jquery点击功能。

.input {
	display: flex;
	flex-direction: column;
	border: 1px solid #000;
	height: 50px;
	justify-content: flex-end;
}
.input > * {
	padding: 5px;
}
#chkId {
	display: none;
}
#login {
	visibility: hidden;
	height: 0px;
	transition: .2s
}
input[type="checkbox"]:checked + input#login {
	visibility: visible;
	height: 40px;
}

<div class="input">
	<label for="chkId" id="login1">Login
	</label>
	<input name="login" type="checkbox" id="chkId">
	<input type="text" id="login" autofocus="true">  
</div>

Answer 3

老兄，您可以使用jQuery做到这一点。这是代码。

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
  </script>
  <script>
  $(document).ready(function(){
      $("label").click(function(){
          $("#login").show();
      });
  });
  </script>