The required attribute

In this example below you will see how to do a The required attribute with some HTML / CSS and Javascript

This awesome code was written by toshimelonhead, you can see more from this user in the personal repository.
You can find the original code on
Copyright toshimelonhead ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>The required attribute</title>
      <link rel="stylesheet" href="css/style.css">



  <!-- Learn about this code on MDN: -->

  <label for="choose">Are you a fan of the Badgers or the Gophers?</label>
  <input id="choose" name="i_like" pattern="Badgers|Gophers|Tommies" required>



/*Downloaded from */
input:invalid {
  border: 1px solid red;

input:valid {
  border: 1px solid green;

"Tommies" {
	border: 1px solid purple;