模拟HTML5表单验证默认样式

Question

我有一个简单的HTML5表单，包含所需的文件。当页面加载时，字段没有样式设置。当我单击required字段时，键入一些内容，然后擦除刚才键入的文本并退出该字段，它将显示Firefox无效字段外的粉红色框阴影。

现在我需要黄色的框影，同时保留同样的行为。我就是这么做的：

在中的应用

<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};

结果:页面加载所有带有黄色框影的字段！而是等待用户犯错误，然后像默认行为那样提交。

如何在不更改行为的情况下覆盖无效字段的默认框影

Answer 1

尝试：

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

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