在输入正确的内容之前，必填字段将无效。在输入文本之前，非必填但经过验证的字段（如URL字段）将有效。

input:invalid { 
border:solid red;
}

更多信息http://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx

目前，还没有办法对这些小验证工具提示进行样式化。唯一的其他选择，也是我选择做的，是现在一起禁用浏览器验证，并依赖于我自己的客户端验证脚本。
根据这篇文章：http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4
“选择退出的最简单方法是将novalidate属性添加到<form>。您也可以在提交控件上设置formnovalidate。”

目前还没有办法做到这一点。
Chrome版本27**之前的版本为验证错误对话框提供了原生外观。错误对话框由四个非规范元素组成。这四个元素可通过应用于对话框不同部分的伪元素进行样式化：

::-webkit-validation-bubble
 
::-webkit-validation-bubble-arrow-clipper 

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message

随着Chrome v28的发布，他们删除了这些非标准选择器：https://bugs.chromium.org/p/chromium/issues/detail?id=259050

如easwee所说，使用伪选择器，例如，要使表单元素有效时为绿色，无效时为红色，可以这样做：

:invalid {
    background: #ffdddd;
         }
:valid{
      background:#ddffdd;
      }

如果您需要这些文件的完整参考，请转到Mozilla Developer Network