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=" " 。 这感觉有点棘手，因为这样一来，您就失去了在需要时使用占位符的功能，但是请记住，您已经对通过在其位置放置标签来拒绝使用占位符了（嗯，如果您需要为占位符包括占位符）为了实现可访问性，请这样做，而不是使用空的占位符放置真实的占位符，然后使用CSS隐藏它们。

:placeholder-shown不支持IE /旧浏览器，因此我们将在此处提供一个逐步增强的好示例：

标签文本已被最小化，并且默认情况下位于输入的顶部（ top: -40px; font-size: 11px; ），以免与用户输入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>