HTML/CSS：输入数字默认在范围内答案

【问题标题】：HTML/CSS: Input number is in range by defaultHTML/CSS：输入数字默认在范围内
【发布时间】：2021-08-22 11:32:16
【问题描述】：

我有一个输入数字标签，最小值为 3，最大值为 999。如果输入范围内的数字，我希望它以绿色突出显示，如果输入超出范围的数字，我希望它以红色突出显示。

问题是它默认突出显示为绿色。为什么要这样做，我该如何做到，只有在输入范围内的数字后才会突出显示绿色？

HTML：

<input type="number" placeholder="No#" min="3" max="999">

CSS：

    input:focus {
        border: 3px solid lightslategray;
    }

    input[type="number"]:not(:focus):out-of-range {
        border: 3px solid red;
    }

    input[type="number"]:not(:focus):in-range {
        border: 3px solid green;
    }

【问题讨论】：

标签： html css input onfocus

【解决方案1】：

仅当您从输入中聚焦时，突出显示才会发生变化。相反，您可以删除指定仅在您聚焦时才会出现绿色突出显示的部分：

    input:focus {
        border: 3px solid lightslategray;
    }

    input[type="number"]:out-of-range {
        border: 3px solid red;
    }

    input[type="number"]:in-range {
        border: 3px solid green;
    }

&lt;input type="number" placeholder="No#" min="3" max="999"&gt;

【讨论】：

【解决方案2】：

问题是浏览器看到空值并将其标记为可接受，我认为你不能在 html\css 中对它做一些事情，因为你需要在关注后验证空值，但浏览器不会' t.

【讨论】：