CodePen

HTML

            
              <fieldset>
  <label for="email">Email:</label>
  <input type="email" name="email">
</fieldset>
  
<fieldset>
  <label for="emailRequired">Email (required):</label>
  <input type="email" name="emailRequired" required>
</fieldset>
            
          
!

CSS

            
              input:invalid {
  background: hsla(0, 90%, 70%, 1);
}

input:valid {
  background: hsla(100, 90%, 70%, 1);
}


body {
  padding: 3em;
}
fieldset {
 border: 0;   
}
input {
  padding: 0.25em 0;
  margin-bottom: 0.75em;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................