HTML5 Required input styling

Question

In HTML 5, we can mark inputs as required and then select them with the [required] pseudo-selector in CSS. But I only want to style them when they

Answer 1

Very simple, just add the class when the element is in focus, then during the submit it gives focus on the elements that are incorrect and the client is filling and validating one by one I believe it is the best solution without using JavaScript.

input:required:focus {
   border-color: palegreen;
}
input:invalid:focus {
   border-color: salmon;
}