如何修复浮动 CSS 标签始终处于活动状态并在我的表单中显示 'invalid input'？

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

涵盖标签没有像其他标签那样过渡的情况；通过在设置 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>

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>

如何修复浮动 CSS 标签始终处于活动状态并在我的表单中显示 'invalid input'？

How do I fix floating CSS label always being active showing 'invalid input' in my form?

html

css

label

floating