html - 如何修复 float CSS 标签始终处于事件状态，在我的表单中显示 'invalid input'？

Question

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

我曾尝试将 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;
}

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

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

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

Answer 1

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

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

涵盖标签不像其他标签那样过渡的情况；通过在设置 input[type="email"]:invalid 的地方使用 :not:empty 来遵循相同的想法。

---

下面是一个工作示例；注意 :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>