html - 删除 FireFox/Internet Explorer 11 上 HTML5 验证的默认红色边框

Question

我正在尝试为 HTML5 验证的表单提供自定义样式。我能够覆盖消息并调整表单，但是，我无法摆脱 IE11 中无效元素周围的红色边框。

Chrome 的行为如我所愿，没有任何边框，但是 IE11 和 Firefox 在字段周围显示红色。

我尝试添加以下内容:

input:required {...}
input:valid    {...}
input:invalid  {...}

但没有成功 - 我只能添加额外的边框，而不能覆盖/删除原来的边框。我还可以看到它们有不同的操作模式——我试图摆脱的红色边框只有在我按下提交按钮后才会应用到 IE 中。表单仅以石灰边框开头，当我按下提交时，还会添加红色边框。放入正确的数据会立即删除两个边框(这是在 IE11 中)。另一方面，Firefox 启动时同时应用了红色和石灰边框。

完整示例:http://jsfiddle.net/zbyzhbdm/5/

有什么方法可以去除红色边框/将其设置为不同的颜色吗？我真的很想使用 native HTML5 验证而不求助于我自己的验证脚本。

更新:可以说服 Firefox 通过以下覆盖删除边框:

input:invalid {
    box-shadow: none !important;
}

(详情请见 http://jsfiddle.net/zbyzhbdm/7/)

IE 仍有待解决。

Answer 1

尝试使用 css 属性 outline 而不是 border。