HTML form field won't keep pseudoclass - css

Question

I have the following form:
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
As each input receives focus, it animates via receiving a class in css. Using basic html5 validation, it's supposed to retain that class to show that it's been properly filled out.
My problem is that I need some fields to be not required. When fields are not marked required, the form automatically applies some of the :valid pseudoclass (the blue underline). The even bigger issue is that when it loses focus, it loses that class and collapses the label back down onto the input text.
What am I missing here? thank you!

Answer 1

You are not missing anything, it all behaves the way it's supposed to be based on your code. So you need an alternative approach.
I suggest using :placeholder-shown selector instead of :valid. This way, empty optional fields will no longer get selected.
To make this work, you first need to add placeholder=" " to your inputs. This feels a bit hacky because this way you are losing the ability to use placeholders in case you need them but remember that you are already saying no to using placeholders by putting labels in their place (well, if you ever need to include placeholders for the sake of accessibility, do it, and instead of empty placeholders put real ones, then hide them with CSS. Another topic, another time).
:placeholder-shown does not have IE/old browser support so we'll go with a good example of progressive enhancement here:
Label text will be already minimised and positioned on top of the input as a default (that is top: -40px; font-size: 11px;) so that it does not mess with user input. I believe that is good enough for IE/old browsers.
Then we add the nice animation effect for browsers that do support :placeholder-shown by including following styles:
input:not(:focus):placeholder-shown + label {
top: -20px;
font-size: 16px;
}
:not(:focus) is necessary to resize and reposition label as soon as user focuses an input because some browsers show placeholder even after focus (and hide it only after user starts typing).
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>