html - 如何在输入 [type ="number"] 上使用模式？

Question

我希望默认值为 0，如果输入大于 0，则使用 :valid 重新着色输入。难道我做错了什么？谷歌浏览器错了吗？还是 HTML5 规范？我想在没有 JS 的情况下解决这个问题。

:valid {
  background: green
}

<p>This should not be green, but it is:</p>
<input max="100" min="0" pattern="^[1-9]\d*$" type="number" value="0" />

<p>Works perfectly, if the type is changed to text:</p>
<input pattern="^[1-9]\d*$" type="text" value="0" />

Answer 1

Citing MDN on the pattern property (添加了突出显示):

pattern

A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. The regular expression language is the same as JavaScript's. The pattern is not surrounded by forward slashes.

有趣的是，我在 W3C 中都找不到任何提及和 WhatWG标准。