title: HTML/CSS: Input number is in range by default
body: <p>I have an input number tag, with a min value of 3 and max of 999. I want it to highlight with green if a number in range is entered, and to highlightwith  red if a number out of range is entered.</p>
  <p>The problem is that it is by default highlighted green. Why is it doing this and how do I make it so it only highlights green after a number in range is entered?</p>
  <p>HTML:</p>
  <pre><code>&lt;input type=&quot;number&quot; placeholder=&quot;No#&quot; min=&quot;3&quot; max=&quot;999&quot;&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>    input:focus {
          border: 3px solid lightslategray;
      }
  
      input[type=&quot;number&quot;]:not(:focus):out-of-range {
          border: 3px solid red;
      }
  
      input[type=&quot;number&quot;]:not(:focus):in-range {
          border: 3px solid green;
      }
  </code></pre>