<form>
	<label for="email_work">Enter work email<sup>*</sup> </label>
  <input type="email" id="email_work" required/><br><br>
  <label for="email_personal">Enter personal email </label>
  <input type="email" id="email_work"/><br><br>
	<label for="fav_url">Favorite website?</label>
  <input type="url" id="fav_url"/>
</form>
body {
	font-family: arial;
}

form {
	padding: 15px;
}

form:invalid {
  border: 1px solid rgba(255,0,0,0.7);
}

form:invalid:after {
	position: absolute;
	left: 10px;
	top: 148px;
	color: red;
  content: "Form has errors";
	font-size: 0.8em;
	font-style: italic;
}

input:valid {
  background-color: rgba(0,255,0,0.2);
}

form:valid {
  border: 1px solid rgba(0,255,0,0.4);
}

input:invalid {
	background-color: rgba(255,0,0,0.2);
	color: #fff;
}

input:required:invalid {
  border-color: gold;
}

input[type=url]:optional {
	background-color: #eee;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.