Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
<style>
input:user-invalid {
  border: 2px solid red;
  background-color: beige;
}
input:user-invalid + span::before {
  content: "X";
  color: red;
}
</style>
</head>
<body>
<h1>Demo of :user-invalid</h1>
<p>Try typing an illegal e-mail address.</p>
<p>Try typing an illegal number.</p>
<form>
  <label for="name">Name: </label><br>
  <input id="name" name="name" type="text" /><br>
  <label for="email">Email: </label><br>
  <input id="email" name="email" type="email" required /> <span></span>
  <p>Input a number between 1 and 10: <input type="number" min="1" max="10" /></p>
</form>
</body>
</html>