删除“必需”时，输入表单浮动标签不起作用-解网

问：

我需要这方面的帮助。它似乎无法正常工作，我真的找不到错误，因为我几个月前才开始编码

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

在我想在我的网站上显示的内容的 HTML 截图上方

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

}

大家好，我这里有一个问题。尝试了很多东西，但似乎没有什么可以正常工作。当我删除了“电话”输入上的“必需”时，浮动不再起作用。此外，在输入电子邮件地址时，它只会在输入正确的地址时保持状态，这有点好，但不好看。我刚开始学习网络开发，我只是找不到正确的方法。

提前感谢

表单输入浮动

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

另一种解决方案是删除该属性并编写自己的动画，从以下规则开始：required

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

删除“必需”时，输入表单浮动标签不起作用

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

评论

评论