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

代码笔:https://codepen.io/anon/pen/PazrBw

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

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

我在这里错过了什么？谢谢!

Answer 1

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

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

要完成这项工作，您首先需要将 placeholder="" 添加到您的输入中。这感觉有点老套，因为这样你就失去了使用占位符的能力，以防你需要它们，但请记住，你已经通过将标签放在它们的位置来拒绝使用占位符(好吧，如果你需要包含占位符为了可访问性，这样做，而不是空占位符放置真实的占位符，然后用 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>