<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
input {
border: 2px solid #000;
}
input:invalid:focus {
background-image: linear-gradient(#34ebba, #6eeb34);
}
</style>
</head>
<body>
<form action="/form/submit" method="post">
<input pattern=".{2,}" required title="2 characters minimum">
<input pattern=".{5,8}" required title="5 to 8 characters">
</form>
</body>
</html>