<form>
  <label for="name">Name:&nbsp;&nbsp;&nbsp;&nbsp;</label>
  <input required id="name" type="text" />
  <br />
  <br />
  <label for="surname">Surname:</label>
  <input id="surname" type="text" />
</form>
 :required {
   border: 1px solid pink;
 }
 
 :optional {
   border: 1px solid skyblue;
 }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.