Display the input field once the label is clicked

Question

Display the input field once the label is clicked

I am encountering an issue with the following 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>

My aim is to have the input display after clicking on the label without using JavaScript. Currently, it only works when I hold the mouse button down. Is there a way to achieve this behavior upon a simple click?

html css

Answer 1

Answer №1

You can apply the focus pseudo-class to enhance input styling
Adding the required attribute and :valid to the input element will maintain its height even when 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 apply the focus pseudo-class to enhance input styling
Adding the required attribute and :valid to the input element will maintain its height even when 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 3

Answer №2

You can incorporate the checked pseudo-class to toggle elements by checking a checkbox or radio button, similar to how the jQuery click function operates.

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

You can incorporate the checked pseudo-class to toggle elements by checking a checkbox or radio button, similar to how the jQuery click function operates.

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

Display the input field once the label is clicked

Answer №1

Answer №2

Similar questions

What is the best way to create transparency within an icon's background without affecting the surrounding box?

Sending a file to an HTML5 <audio> element using HTTP headers

Displaying static files in a base template using Django is a breeze

Using jQuery to perform multiple actions with a single button

Display the keyboard on IOS when an input field is selected

Is there a way to obtain a user's screen size without relying on a physical device or measuring the diagonal?

Having trouble displaying the cover image properly on mobile devices using Bootstrap/MDBootstrap, facing issues with the live server as well

Learn how to prevent two-finger swipe forward/backward on a trackpad using JavaScript or HTML

Excessive HTML and CSS overflow stretching beyond the boundaries of the page on the right

Using Node.js and the Jade templating engine, display the value of a passed variable

Troubleshooting an unresponsive webview pop-up

What is the best method for customizing the color of angularjs spinners?

Populate div with straight lines running vertically or horizontally

Avoiding conflicts between banners, text, and images for HTML/CSS design

How can I align an image and text alongside another image using HTML and CSS?

What is the best way to retrieve all the listed TV and film ratings in descending order? Using Django

Automotive Dealership API by Edmunds

Two objects precisely located in the same spot yet not visible simultaneously

Looking for some assistance with an auto-calculation form, anyone able to help out

Utilize Java to extract content from an HTML document by implementing xpath