如何修复浮动 CSS 标签始终处于活动状态，在我的表单中显示“无效输入”？

Question

我试图让我的调查表问题具有浮动标签，当用户输入数据时仍然可见，并且在添加带有错误消息的电子邮件验证后，第二个问题被破坏了。它显示为始终无效，即使没有输入。

我尝试将 CSS 选择器更改为相邻的同级组合器，但是虽然这最初将我的标签放在正确的位置，但它破坏了特定的 input[type="email"]:invalid ~.question-label 样式。

这是 HTML：

<div class="form-option">
    <input type="email" id="email" class="question-answer" placeholder=" " required>
    <span class="bar"></span>
    <label class="question-label" id="email-label">Email<span class="asterisk"> *</span></label>
    <div class="requirements">
      Must be a valid email address
    </div>
</div>

这里是相关的 CSS：

.question-answer:focus ~.question-label, .question-answer:valid ~.question-label {
    top: -16px;
    font-size: 14px;
     color: #4285f4;
}
input[type="email"]:valid + label {
  opacity: 0;
}
.requirements {
  padding-top: 5px;
  font-style: italic;
  color: red;
  opacity: 0;
  display: none;
}
input[type="email"]:invalid {
    background-color: pink;
    transition: ease .25s;
}

input[type="email"]:invalid ~.question-label {
    top: -16px;
    font-size: 14px;
    color: red;
}
input[type="email"]:invalid:focus ~.requirements {
    opacity: 100;
    display: block;
}

这里有一个完整的 Codepen：https://codepen.io/Pixel123/pen/NzByep 如果问题需要澄清。

我希望标签位于一个起始位置，然后在聚焦后向上移动和调整大小，并在输入有效电子邮件后变为蓝色（这部分有效）。如果输入不是有效的电子邮件，则声明 必须是有效的电子邮件地址的div 将变为可见。

就目前而言，应仅在无效电子邮件上显示的输入突出显示始终处于打开状态，并在没有输入时突出显示该字段。

Answer 1

您需要使用:empty 选择器并将背景颜色设置为您选择的颜色；就你的笔来说，这是白色的：

.question-answer:empty {
  background-color: #FFF !important;
}

涵盖标签没有像其他标签一样转换的情况；使用:not:empty 设置input[type="email"]:invalid，遵循相同的想法。

---

以下是一个工作示例；注意:empty 在question-answer 上的使用。

    .question-answer:focus ~.question-label, .question-answer:valid ~.question-label {
        top: -16px;
        font-size: 14px;
         color: #4285f4;
    }
    .question-answer:empty {
      background-color: #FFF !important;
    }
    input[type="email"]:valid + label {
      opacity: 0;
    }
    .requirements {
      padding-top: 5px;
      font-style: italic;
      color: red;
      opacity: 0;
      display: none;
    }
    input[type="email"]:invalid {
        background-color: pink;
        transition: ease .25s;
    }

    input[type="email"]:invalid:not:empty ~.question-label {
      top: -16px;
      font-size: 14px;
      color: red;
    }
    input[type="email"]:invalid:focus ~.requirements {
        opacity: 100;
        display: block;
    }

    <div class="form-option">
        <input type="email" id="email" class="question-answer" placeholder=" " required>
        <span class="bar"></span>
        <label class="question-label" id="email-label">Email<span class="asterisk"> *</span></label>
        <div class="requirements">
          Must be a valid email address
        </div>
    </div>

Answer 2

根据 MDN，您应该尝试使用 :required 和 :invalid 伪选择器，并结合 :valid 选择器。

因此，当您的输入是必需的或无效时，您可以应用样式并在其有效时将其删除。

这是一个工作示例：

input[type="email"]:required,
input[type="email"]:invalid {
  background-color: pink;
  transition: ease .25s;
}

input[type="email"]:valid {
  background-color: green;
  transition: ease .25s;
}

<div class="form-option">
  <input type="email" id="email" class="question-answer" placeholder=" " required>
  <span class="bar"></span>
  <label class="question-label" id="email-label">Email<span class="asterisk"> *</span></label>
  <div class="requirements">
    Must be a valid email address
  </div>
</div>