Edit in JSFiddle

<h2>:required</h2>
<p><strong>Name:</strong> <input type="text" value="value" required=""></p>
	
<h2>:valid</h2>
<p><strong>Email:</strong> <input type="email" value="[email protected]"></p>

<h2>:invalid</h2>
<p><strong>Email:</strong> <input type="email" value="you" required=""></p>

input:required {
	border: 1px solid blue;
}
input:valid {
	border: 1px solid green;
}
input:invalid {
	border: 1px solid red;
}