CodePen Embed - user-invlalid を使ったログインフォーム

<form>
  <h2>Login</h2>

  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required />
  </div>

  <div>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" required />
  </div>

  <div>
    <button type="submit">Login</button>
  </div>
</form>

  #email:user-invalid {
    border: 1px solid red;
  }

  #password:user-invalid {
    border: 1px solid red;
  }

This Pen is owned by azukiazusa1 on CodePen.

See more by @azukiazusa1 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.