Input Form Floating Label does not work, when "required" is removed

I need help with this one. it just doesnt seem to work right and I cant really find the mistake, since I just started coding a few months ago

     <div class="form">
        <form class="box" action="#">
          <div class="input-container">
            <input type="text" id="vname" name="vname" required placeholder=" ">
            <label for="vname">Vorname*</label>
          </div>

          <div class="input-container">
            <input type="text" id="zname" name="zname" required placeholder=" ">
            <label for="zname">Nachname*</label>
          </div>

          <div class="input-container">
            <input type="tel" id="phone" name="phone" placeholder=" ">
            <label class="-placeholder" for="phone">Telefon</label>
          </div>

          <input class="button" type="submit" name="button" id="send" value="senden">

        </form>
      </div>

Above the HTML snip for what i wanted to display on my website

.form {
  display: grid;
}

.input-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-container label {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-size: 1.1rem;
  transition: all 0.5s ease-in-out;
}

.input-container input {
  border-bottom: 1px solid #555;
  background: var(--background);
  width: 45vw;
  padding: 0.5rem 0 0.2rem 0;
  font-size: 1rem;
  color: var(--text-color);
  text-align: left;
  margin: 0.5rem;
}

.input-container input:focus~label,
.input-container input:valid~label{
  top: -0.8rem;
  font-size: 0.8rem;
}

input:focus {
  border-radius: 1rem;
  background-color: var(--shadowbox);
  transition: all 0.2s ease-in;
}

.input-container input:active{
  border-radius: 1rem;
  background-color: var(--shadowbox)

}

Hello everyone, I kinda have an Issue here. tried many things but nothing seem to work properly. when I have the "required" removed on the "phone" input the floating doesn't work anymore. Also when typing email-adress it only stays up, when entering a correct adress, which is kinda ok, but not nice looking. I just started to learn webdevelopment and I just cant find the correct way to do it right.

Thx in advance

The issue is that on the one hand you want to make sure that you can send the form and therefore you want it to no longer be required and, on the other hand, you want to preserve the visual benefits. A way to do this is to keep it required but just before the form submit you set required to false:

onclick="document.getElementById('phone').required = false;"

See:

.form {
  display: grid;
}

.input-container {
  position: relative;
  margin-bottom: 1.5rem;
}

.input-container label {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  font-size: 1.1rem;
  transition: all 0.5s ease-in-out;
}

.input-container input {
  border-bottom: 1px solid #555;
  background: var(--background);
  width: 45vw;
  padding: 0.5rem 0 0.2rem 0;
  font-size: 1rem;
  color: var(--text-color);
  text-align: left;
  margin: 0.5rem;
}

.input-container input:focus~label,
.input-container input:valid~label{
  top: -0.8rem;
  font-size: 0.8rem;
}

input:focus {
  border-radius: 1rem;
  background-color: var(--shadowbox);
  transition: all 0.2s ease-in;
}

.input-container input:active{
  border-radius: 1rem;
  background-color: var(--shadowbox)

}

<div class="form">
        <form class="box" action="#">
          <div class="input-container">
            <input type="text" id="vname" name="vname" required placeholder=" ">
            <label for="vname">Vorname*</label>
          </div>

          <div class="input-container">
            <input type="text" id="zname" name="zname" required placeholder=" ">
            <label for="zname">Nachname*</label>
          </div>

          <div class="input-container">
            <input type="tel" id="phone" name="phone" required placeholder=" ">
            <label class="-placeholder" for="phone">Telefon</label>
          </div>

          <input onclick="document.getElementById('phone').required = false;" class="button" type="submit" name="button" id="send" value="senden">

        </form>
      </div>

Another solution is to remove the required attribute and program your own animation, starting with rules such as:

input:not([required])::placeholder {
  color: black;
  opacity: 1; /* Firefox */
}