HTML5 - 无效表单，因为占位符不是数字

Question

我的空数字输入表单通过我的 css 获得了无效的颜色，因为占位符文本不是数字，或者还有什么问题？

js fiddle

:invalid {
  border: 2px solid #ff0000;
 }

html

 <input type="number" placeholder="Sum" required pattern="[0-9]*"/>

Answer 1

使输入亮起红色的不是占位符，而是必需的标志。如果您删除所需的关键字，它就会正常显示。