Label Position Fixed after transforming in CSS and HTML

Question

In the current design, there is an input field provided for entering a text. When this input field is focused or selected, the associated label moves slightly upwards, changes its color and font size, and acquires a background color, which is perfect.

However, when entering text in the input field and then clicking outside to type in another field, an issue arises. In this scenario, the label returns to its original position and becomes intertwined with the text, creating a messy appearance.

To address this, my desired outcome is that once the label moves up upon being typed in the input field, it should remain in that elevated position and not revert back to its original placement.

Kindly help me here.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .input[type="email"] {
  display: block;
  border: 1px solid rgb(228, 228, 228);
  font-size: 16px;
  width: 20%;
  height: 55px;
  padding: 0 15px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  outline: none;
  border-radius: 5px;
  position: relative;
}

.inputs {
  position: relative;
}

.input-label {
  position: absolute;
  top: 15px;
  font-size: 1.1rem;
  left: 14px;
  color: rgb(122, 122, 122);
  font-weight: 100;
  transition: 0.1s ease;
  background-color: white;
  padding: 0 5px;
}

.input[type="email"]:focus~.input-label {
  top: -7px;
  color: #18c9c0;
  font-size: 13px;
  background-color: rgb(255, 255, 255);
  z-index: 2;
}

.input[type="email"]:focus {
  border: 2px solid #afff03;
}
    </style>
    <title>Document</title>
</head>
<body>
    <div class="inputs">
        <input type="email" name="" id="email" class="input">
        <label for="email" class="input-label">Enter Text</label>
    </div>
</body>
</html>

score 0 · Answer 1 · answered Aug 16 '23 at 15:26

Yes, Now you have to add javascript to handle this problem. Kindly add javaScript in your code and your outcome will be perfect

const holdUp = () => {
    const labels = document.querySelectorAll('label')
    labels.forEach(label => {
        const input = label.previousElementSibling
        input.addEventListener('change', function() {
            if (input.value !== "") {
                label.classList.add('up')
            } else {
                label.classList.remove('up')
            }
        })
    })
}
holdUp()

corn on the cob · Answer 2 · 2023-08-16T19:01:54.260

In your CSS, you can use placeholder pseudo-classes to achieve this. dd the selector .input[type="email"]:not(:placeholder-shown)~.input-label to target the label when the input doesn't have a placeholder.

.input[type="email"]:focus~.input-label,
.input[type="email"]:not(:placeholder-shown)~.input-label {
  top: -7px;
  color: #18c9c0;
  font-size: 13px;
  background-color: rgb(255, 255, 255);
  z-index: 2;
}

Also you will then need to add placeholder=" " to the input to make sure it actually has a placeholder (even though it's empty) so it'll be selected when we want it. Here is the full solution:

.input[type="email"] {
  display: block;
  border: 1px solid rgb(228, 228, 228);
  font-size: 16px;
  width: 20%;
  height: 55px;
  padding: 0 15px;
  margin-bottom: 10px;
  position: relative;
  z-index: 2;
  background-color: transparent;
  outline: none;
  border-radius: 5px;
  position: relative;
}

.inputs {
  position: relative;
}

.input-label {
  position: absolute;
  top: 15px;
  font-size: 1.1rem;
  left: 14px;
  color: rgb(122, 122, 122);
  font-weight: 100;
  transition: 0.1s ease;
  background-color: white;
  padding: 0 5px;
}

.input[type="email"]:focus~.input-label,
.input[type="email"]:not(:placeholder-shown)~.input-label {
  top: -7px;
  color: #18c9c0;
  font-size: 13px;
  background-color: rgb(255, 255, 255);
  z-index: 2;
}

.input[type="email"]:focus {
  border: 2px solid #afff03;
}

<div class="inputs">
  <input type="email" placeholder=" " name="" id="email" class="input">
  <label for="email" class="input-label">Enter Text</label>
</div>

See Matching an empty input box using CSS more info

Label Position Fixed after transforming in CSS and HTML

2 Answers2