<fieldset>
  <legend>Profile Update</legend>
  <form>

    <div class="row">
      <label for="name">Name: </label>
      <input id="name" type="text" pattern="([a-zA-Z0-9]\s?)+" placeholder="Enter full name" required />
      <span></span>
    </div>

    <div class="row">
      <label for="email">Email: </label>
      <input id="email" type="email" placeholder="Your email" required />
      <span></span>
    </div>

    <div class="row">
      <label for="website">Website: </label>
      <input id="website" type="url" placeholder="Your website" />
      <span></span>
    </div>

    <br />
    <br />
    <button type="submit">Submit</button>
  </form>
</fieldset>

body {
  font-family: sans-serif;
  background: beige;
  color: black;
  text-align: center;
}

.row {
  margin-bottom: 20px;
}

input + span {
  position: relative;
}

input + span::before {
  position: absolute;
  right: -20px;
  bottom: 0;
}

input:not(:placeholder-shown):invalid {
  border: 2px solid red;
}

input:not(:placeholder-shown):invalid + span::before {
  content: "✖";
  color: red;
}

input:not(:placeholder-shown):valid + span::before {
  content: "✓";
  color: green;
}

input:optional {
  border: 1.2px dashed;
}
input:optional:focus {
  outline: 2px dashed;
  border-color: transparent;
}