Show Up Input after clicking on label

Question

I have have this code

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

I need to make input show up after clicking on label. However it works only when I hold mousebutton down. Is there any way to make input showup on click without using JS?

Answer 1

You can use focus pseudo class
I also added required attribute and :valid to input so it keeps the height when it's not empty

.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

You can also use checked pseudo by adding checkbox or radio. This works like jquery click function.

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