<form>
  <div>
    <label for="_1" title="At most 5 characters">First Name</label>
    <input id="_1" type="text" maxlength="5" minlength="2" required placeholder="Required" value="" />
  </div>
  <div>
    <label for="_2" title="At least 3 characters">Last Name</label>
    <input id="_2" type="text" minlength="3" value="" />
  </div>
</form>
div:focus-within > label[title]:after {
  content: attr(title);
  font-size: small;
  padding-left: 0.2em;
  margin-left: 0.2em;
  border-left: 1px solid black;
  border-radius: 2px;
}

label, input {
  display: block;
}

input {
  margin: 0 .25rem;
  min-width: 125px;
  border: 1px solid #eee;
  border-left: 3px solid;
  border-radius: 5px;
  transition: border-color .5s ease-out;
  padding: .3em;
}

input:required:placeholder-shown {
  border-right: 3px solid;
  border-left-color: black;
}

input:optional {
  border-left-color: #999;
}

input:required:valid {
  border-left-color: palegreen;
}

input:invalid {
  border-left-color: salmon;
  border-rigth-color: salmon;
}

/* input:required:focus:valid {
  background: url("/images/check.svg") no-repeat 95% 50%;
  background-size: 25px;
}

input:focus:invalid {
  background: url("/images/tnt.svg") no-repeat 95% 50%;
  background-size: 45px;
} */
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.