root
/
css-mastery-16-master


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
							<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form pseudo-classes</title>

  <style>
    body {
      font-family: "Helvetica Neue", Arial, sans-serif;
    }
    label, button {
      display: block;
      margin-top: 1em;
      font-size: 1em;
    }
    input {
      border: 1px solid #aaa;
      font-size: 1em;
      padding: 0.2em;
      outline-offset: 0;
    }

    input, button {
      line-height: 1.5em;
      padding: 0.25em;
    }

    input:required {
      border-color: black;
    }
    input:optional {
      border-color: #ccc;
    }
    input:valid {
      border-color: green;
      outline: 2px solid green;
    }

    input:invalid {
      border-color: red;
      outline: 2px solid pink;
    }
    .help-text {
      display: inline;
      font-style: italic;
      color: #999;
    }
  </style>
</head>
<body>
  <form action="." method="post" novalidate>
    <label for="field-name">Name:</label>
    <input type="text" name="field-name" id="field-name" required>
    <p class="help-text">Required</p>

    <label for="field-email">Email:</label>
    <input type="email" name="field-email" id="field-email">
    <p class="help-text">Optional</p>

    <label for="field-email-confirm">Confirm email:</label>
    <input type="email" name="field-email-confirm" id="field-email-confirm">
    <p class="help-text">Optional unless email field is filled in.</p>

    <button type="submit">Send</button>
  </form>
</body>
</html>