<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
input {
  outline: 2px solid lime;
}
input:in-range {
  outline: 2px solid red;
}
input:out-of-range {
  outline: 2px solid orange;
}
  </style>
</head>
<body>
  <!-- Chris Rebert's test case for https://bugs.webkit.org/show_bug.cgi?id=156530 -->
  <input type="number" value=0 min=0 max=10 disabled> Disabled in-range
  <br><br>
  <input type="number" value=0 min=0 max=10 readonly> Read-only in-range
  <br><br>
  <input type="number" value=11 min=0 max=10 disabled> Disabled out-of-range
  <br><br>
  <input type="number" value=11 min=0 max=10 readonly> Read-only out-of-range
</body>
</html>