css input box validate

• Checking if an input is empty with CSS
• Form Validation Part 1: Constraint Validation in HTML

body {
  margin-top: 1.6em;
}

.form-group {
  position: relative;
  margin: 1em;
}
.form-group .form-control {
}
.form-group .form-control::placeholder {
  opacity: 0;
}
.form-group .form-control + label {
  color: #000;
  position: absolute;
  top: 50%;
  padding: 0.375rem 0.75rem;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}
.form-group .form-control:optional + label {
  color: darkgray;
}
.form-group .form-control:invalid + label {
  color: red;
}
.form-group .form-control:valid + label {
  color: green;
}
.form-group .form-control:not(:placeholder-shown)::placeholder,
.form-group .form-control:focus::placeholder {
  opacity: 1;
}
.form-group .form-control:not(:placeholder-shown) + label,
.form-group .form-control:focus + label {
  transform: translateY(-120%);
}

<form>
  <div class="form-group">
    <input type="text" name="userNm" id="userNm" class="form-control" placeholder="User Name" maxlength="20" pattern=".*\S.*" />
    <label for="userNm">User Name</label>
  </div>
  <div class="form-group">
    <input type="text" name="userId" id="userId" class="form-control" placeholder="User Id" maxlength="20" required pattern=".*\S.*" />
    <label for="userId">User Id</label>
  </div>
</form>

See the Pen Checking if an input is empty with CSS by C.H (@uncaose) on CodePen.

See the Pen Checking if an input is empty with CSS - 2nd by C.H (@uncaose) on CodePen.