HTML 表单字段不会保留伪类

Question

我有以下表格：

body {
  background: #fff;
  color: 404040
}

form {
  display: block;
  position: relative;
  width: 80%;
  background: #f9f9f9;
  margin: 10px auto;
  padding: 30px;
}

label {
  display: block;
  position: relative;
  top: -20px;
  left: 0px;
  color: #999;
  font-family: 'Helvetica', sans-serif;
  font-size: 16px;
  z-index: 1;
  transition: all 0.3s ease-out;
}

input,
input:optional {
  display: block;
  position: relative;
  background: none;
  border: none;
  border-bottom: 1px solid #ddd;
  width: 100%;
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  font-size: 16px;
  z-index: 2;
}

input:focus,
input:valid {
  outline: none;
  border-bottom: 1px solid #00aced;
}

input:focus+label,
input:required:valid+label {
  top: -40px;
  font-size: 11px;
  color: #00aced;
}

.divider {
  position: relative;
  height: 30px;
  width: auto;
  background: none;
}

#hex1 {
  width: 75px;
  margin: 10px auto;
}

.headline {
  margin-left: 100px;
  font-size: 24px;
}

.submitBtn {
  width: 250px;
  height: 75px;
  border-radius: 3px;
  background: #37afac;
  margin: 0 auto;
  color: #fff
}

#title {
  margin-top: -60px;
  margin-left: 80px;
  margin-bottom: 20px;
}

<form>
  <h3>Details about the person you are reporting:</h3>
  <div class='divider'></div>
  <input type="text" name="firstname" required autocomplete="off" />
  <label for="firstname">First Name</label>
  <div class='divider'></div>
  <input type="text" name="lastname" required autocomplete="off" />
  <label for="lastname">Last Name</label>
  <div class='divider'></div>
  <input type="text" name="age" class="test" autocomplete="off" />
  <label for="age">Age</label>
  <div class='divider'></div>
  <input type="text" name="gender" required autocomplete="off" />
  <label for="gender">Gender</label>
  <div class='divider'></div>
  <input type="text" name="address 1" autocomplete="off" />
  <label for="address1">Address 1</label>
  <div class='divider'></div>
  <input type="text" name="address 2" autocomplete="off" />
  <label for="address2">Address 2</label>
  <div class='divider'></div>
  <input type="text" name="city" required autocomplete="off" />
  <label for="city">City</label>
  <div class='divider'></div>
  <input type="text" name="state" required autocomplete="off" />
  <label for="state">State</label>
  <div class='divider'></div>
  <input type="text" name="position" autocomplete="off" />
  <label for="Position">Position (coach, referee, etc)</label>
  <div class='divider'></div>
  <input type="text" name="program" required autocomplete="off" />
  <label for="Program">Program where individual works</label>
  <div class='divider'></div>
  <input type="text" name="IncidentDescription" required autocomplete="off" />
  <label for="IncidentDescription">Incident description</label>
  <div class='divider'></div>
  <input type="text" name="IncidentLocation" required autocomplete="off" />
  <label for="IncidentLocation">Incident location</label>
  <div class='divider'></div>

Codepen：https://codepen.io/anon/pen/PazrBw

当每个输入获得焦点时，它会通过接收 css 中的类来进行动画处理。使用基本的 html5 验证，它应该保留该类以表明它已正确填写。

我的问题是我需要一些不需要的字段。当字段未标记为必填时，表单会自动应用一些 :valid 伪类（蓝色下划线）。更大的问题是，当它失去焦点时，它会失去该类并将标签折叠回输入文本上。

我在这里缺少什么？谢谢！

Answer 1

您没有遗漏任何东西，一切都按照您的代码应有的方式运行。所以你需要一种替代方法。

我建议使用:placeholder-shown 选择器而不是:valid。这样，空的可选字段将不再被选中。

要完成这项工作，您首先需要将placeholder=" " 添加到您的输入中。这感觉有点 hacky，因为这样你就失去了使用占位符的能力，以防万一你需要它们，但请记住，你已经通过在它们的位置放置标签来拒绝使用占位符（好吧，如果你需要为为了可访问性，去做吧，而不是用空的占位符放置真实的占位符，然后用 CSS 隐藏它们。另一个话题，另一个时间）。

:placeholder-shown 不支持 IE/旧浏览器，因此我们将在这里举一个渐进增强的好例子：

标签文本将被最小化并默认放置在输入顶部（即top: -40px; font-size: 11px;），这样它就不会与用户输入混淆。我相信这对于 IE/旧浏览器来说已经足够好了。

然后我们为支持:placeholder-shown的浏览器添加漂亮的动画效果，包括以下样式：

input:not(:focus):placeholder-shown + label {
  top: -20px;
  font-size: 16px;
}

:not(:focus) 是在用户聚焦输入后立即调整标签大小和重新定位标签的必要条件，因为某些浏览器即使在聚焦后也会显示占位符（并且仅在用户开始输入后才隐藏它）。

body {
  background: #fff;
  color: 404040
}

form {
  display: block;
  position: relative;
  width: 80%;
  background: #f9f9f9;
  margin: 10px auto;
  padding: 30px;
}

label {
  display: block;
  position: relative;
  /* top: -20px; */
  top: -40px;
  left: 0px;
  color: #999;
  font-family: 'Helvetica', sans-serif;
  /* font-size: 16px; */
  font-size: 11px;
  z-index: 1;
  transition: all 0.3s ease-out;
}

input/*,
input:optional */ {
  display: block;
  position: relative;
  background: none;
  border: none;
  border-bottom: 1px solid #ddd;
  width: 100%;
  font-family: 'Helvetica', sans-serif;
  font-weight: bold;
  font-size: 16px;
  z-index: 2;
}

input:focus/*,
input:valid*/ {
  outline: none;
  border-bottom: 1px solid #00aced;
}

input:focus+label/*,
input:required:valid+label*/ {
  color: #00aced;
}

/* New styles >> */
input:not(:focus):placeholder-shown + label {
  top: -20px;
  font-size: 16px;
}
/* << */

.divider {
  position: relative;
  height: 30px;
  width: auto;
  background: none;
}

#hex1 {
  width: 75px;
  margin: 10px auto;
}

.headline {
  margin-left: 100px;
  font-size: 24px;
}

.submitBtn {
  width: 250px;
  height: 75px;
  border-radius: 3px;
  background: #37afac;
  margin: 0 auto;
  color: #fff
}

#title {
  margin-top: -60px;
  margin-left: 80px;
  margin-bottom: 20px;
}

<form>
  <h3>Details about the person you are reporting:</h3>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="firstname" required autocomplete="off" />
  <label for="firstname">First Name</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="lastname" required autocomplete="off" />
  <label for="lastname">Last Name</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="age" class="test" autocomplete="off" />
  <label for="age">Age</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="gender" required autocomplete="off" />
  <label for="gender">Gender</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="address 1" autocomplete="off" />
  <label for="address1">Address 1</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="address 2" autocomplete="off" />
  <label for="address2">Address 2</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="city" required autocomplete="off" />
  <label for="city">City</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="state" required autocomplete="off" />
  <label for="state">State</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="position" autocomplete="off" />
  <label for="Position">Position (coach, referee, etc)</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="program" required autocomplete="off" />
  <label for="Program">Program where individual works</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="IncidentDescription" required autocomplete="off" />
  <label for="IncidentDescription">Incident description</label>
  <div class='divider'></div>
  <input placeholder=" " type="text" name="IncidentLocation" required autocomplete="off" />
  <label for="IncidentLocation">Incident location</label>
  <div class='divider'></div>