<h2>Valid Pseudo-class Example</h2>
<input type="text" class="input" value="this has a value" required="required" /><br /><br />
<input type="text" class="input" value="" required="required" />
body {
  text-align: center;
  margin-top: 50px;
}

.input:valid {
	border: 2px solid green;
  width: 180px;
}
.input:invalid {
	border: 2px solid red;
  width: 180px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.