CSS超出范围的代码示例

我一直厌恶网络开发的一个方面是与表单打交道。由于操作系统和浏览器的差异，表单元素历来难以形成风格，而且验证可能是一场噩梦。 幸运的是，本地HTML APIs增加了改善表单验证情况的方法。

通过input[type=number] 元素，你可以添加min 和max 属性。 这些属性很好，但如果这些数字超出了范围，浏览器就不会显示明显的错误样式。 幸运的是，我们有:out-of-range：

/* matches when number is not within min and max */
input[type=number]:out-of-range {
  border-color: red;
}

感谢CSS:out-of-range ，开发者可以根据其有效值状态对input 元素进行样式设计。 尽管有了HTML验证和样式设计，你仍然必须做服务器端的验证；说实话，你可能也想在这里做JavaScript验证。