如何在输入[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

引用pattern属性上的MDN(突出显示已添加):

图案

一个正则表达式,用于检查控件的值.模式必须匹配整个值,而不仅仅是某个子集.使用title属性来描述帮助用户的模式.当type属性的值为text,search,tel,url或email时,此属性适用; 否则会被忽略.正则表达式语言与JavaScript相同.图案未被正斜杠包围.

有趣的是,我无法在W3C和WhatWG标准中找到任何提及.