Assessment wanted for Advanced form styling 3 skill test

advance form styling 3

by shivani0005

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <title>Advanced styling: Task 3</title>
  </head>

  <body>
    <form>
      <fieldset>
        <legend>Feedback form</legend>

        <p>Required fields are labelled with "required".</p>
        <div>
          <label for="fname">First name: </label>
          <input id="fname" name="fname" type="text" required>
          <span></span>
        </div>
        <div>
          <label for="lname">Last name: </label>
          <input id="lname" name="lname" type="text" required>
          <span></span>
        </div>
        <div>
          <label for="email">Email address: </label>
          <input id="email" name="email" type="email">
          <span></span>
        </div>
        <div><button>Submit</button></div>
      </fieldset>
    </form>
  </body>

</html>

CSS

body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }

      button,
      input,
      select {
        font-family: inherit;
        font-size: 100%;
        padding: 0; margin: 0;
      }

      fieldset {
        padding: 10px 30px 0;
        width: 400px;
      }

      legend {
        color: white;
        background: black;
        padding: 5px 10px;
      }

      fieldset > div {
        margin-bottom: 20px;
        display: flex;
        flex-flow: row wrap;
      }

      button, label, input {
        display: block;
        font-family: inherit;
        font-size: 100%;
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        width: 100%;
        padding: 5px;
        height: 30px;
      }

      input {
        box-shadow: inset 1px 1px 3px #ccc;
        border-radius: 5px;
      }

      input:hover, input:focus {
        background-color: #eee;
        
      }

      button {
        width: 60%;
        margin: 0 auto;
      }
      input + span{
        position: relative;
      }
      input:required + span::after{
        font-size: 0.7em;
        position: absolute;
        content: "required";
        color: white;
        background-color: black;
        padding: 5px 10px;
        top: -26px;
        left: -70px;
      }
      input + span::before{
        position: absolute;
        right: -20px;
        top: 5px;
      }
      input:invalid{
        border: 2px outset red;
        
      }
      input:invalid + span::before{
        content: "✖";
        color: red;
      }
      input:valid + span::before{
        content: "✓";
        color: green;
        
        
      }