Floating labels with html and css

im trying to make a form for messages in a website with floating labels. However im using classes and the styling is the same for every input ans label but the email form is broken.

I tried this and it's working for every input except for the email. When i try to write the email tha label keeps coming down. I don't know where that comes from, can u help. <3

.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}

.input-group {
  position: relative;
  margin: 20px 0;
}

.input-group label {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  font-size: 16px;
  color: black;
  padding: 0 5px;
  pointer-events: none;
  transition: .5s;
}

.input-group textarea {
  transition: .5s;
}

.input-group input,
.input-group textarea {
  width: 320px;
  height: 40px;
  font-size: 16px;
  color: black;
  padding: 0 10px;
  background-color: transparent;
  border: none;
  border-bottom: 1.2px solid black;
  outline: none;
}

.input-group input:focus~label,
.input-group input:valid~label,
.input-group textarea:focus~label,
.input-group textarea:valid~label {
  top: 0;
  font-size: 12px;
  background: white;
}

<div class="contact-form">
  <h3>Изпрати ни съобщение</h3>
  <form action="submit">
    <div class="input-group">
      <input type="text" id="name" name="name" required>
      <label for="name">Име</label>
    </div>
    <div class="input-group">
      <input type="text" id="phone" name="phone" required>
      <label for="phone">Телефон</label>
    </div>
    <div class="input-group">
      <input type="email" id="email" name="email" required>
      <label for="email">Имейл</label>
    </div>
    <div class="input-group">
      <textarea required name="message" id="message" cols="50" rows="10"></textarea>
      <label for="message">Съобщение</label>
    </div>
  </form>
  <button type="submit">Изпрати</button>
</div>

Solution

This issue occurs because your CSS rules for floating labels are applied when the input is focused or valid. However, email validation might be triggering the label to move down.

To fix this issue, you can adjust your CSS to keep the label in place when there is content in the email input, regardless of whether it's valid or not.

Here's the updated CSS for your issue.

.submit {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  flex-direction: column;
}

.input-group {
  position: relative;
  margin: 20px 0;
}

.input-group label {
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translateY(-50%);
  font-size: 16px;
  color: black;
  padding: 0 5px;
  pointer-events: none;
  transition: .5s;
}

.input-group textarea {
  transition: .5s;
}

.input-group input,
.input-group textarea {
  width: 320px;
  height: 40px;
  font-size: 16px;
  color: black;
  padding: 0 10px;
  background-color: transparent;
  border: none;
  border-bottom: 1.2px solid black;
  outline: none;
}

.input-group input:focus~label,
.input-group input:valid~label,
.input-group textarea:focus~label,
.input-group textarea:valid~label,
.input-group input.invalid~label {
  top: 0;
  font-size: 12px;
  background: white;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

<body>
  <div class="contact-form">
    <h3>Изпрати ни съобщение</h3>

    <form action="submit">
      <div class="input-group">
        <input type="text" id="name" name="name" required>
        <label for="name">Име</label>
      </div>

      <div class="input-group">
        <input type="text" id="phone" name="phone" required>
        <label for="phone">Телефон</label>
      </div>

      <div class="input-group">
        <input type="email" id="email" name="email" required>
        <label for="email">Имейл</label>
      </div>

      <div class="input-group">
        <textarea required name="message" id="message" cols="50" rows="10"></textarea>
        <label for="message">Съобщение</label>
      </div>
    </form>

    <button type="submit">Изпрати</button>
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      document.getElementById("email").addEventListener("input", function() {
        if (this.validity.valid) {
          this.classList.remove("invalid");
        } else {
          this.classList.add("invalid");
        }
      });
    });
  </script>
</body>

</html>