模仿HTML5表单验证默认样式

Question

我有一个简单的HTML5表单，包含所需的文件。当页面加载字段没有样式。当我点击必填字段时，键入内容然后删除我刚输入的文本并退出该字段，它会向我显示Firefox中无效字段外面的粉色阴影。

现在我需要黄色阴影，同时保留相同的行为。这就是我所做的：

在HTML

<input name="email_address" id="email_address_uuid_479823574" type="email" 
     placeholder="ex. [email protected]" title="Email address" required /> 

     ------- 
     ------- 

<input name="model_number" id="model_number_uuid_479823574" type="text" 
     placeholder="ex. oxpd-983s" title="Equipment model number" required /> 

在CSS

input:required:invalid {box-shadow: 1px 2px 9px yellow}; 

结果：该页面加载了所有与黄色的box-shadow的领域！而是等待用户将错误onblur和onsubmit像默认行为一样提交。

如何覆盖无效字段的默认方块阴影而不更改行为？

Answer 1

尝试：

input:required:-moz-ui-invalid {box-shadow: 1px 2px 9px yellow}; 

见https://developer.mozilla.org/en/CSS/:invalid