<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;
} */
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.