css - 模仿 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