模仿HTML5表单验证默认样式

Question

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

现在我需要黄色的盒子阴影，同时保持相同的行为。我就这样做了：

在HTML中

<input name="email_address" id="email_address_uuid_479823574" type="email"
       placeholder="ex. example@domain.com" 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};

结果：页面加载所有带黄色框阴影的字段！而是等待用户犯错误onblur和onsubmit就像默认行为一样。

如何覆盖无效字段的默认框阴影而不改变行为？

Answer 1

尝试：

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

请参阅https://developer.mozilla.org/en/CSS/:invalid