Question 231558 in Html Question posted in
Some basic documentation can be found here.

Label Position Fixed after transforming in CSS and HTML

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>
Tags:

2

Answers


  1. 0

    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()
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search