在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/

有没有办法删除红色边框/将其设置为不同的颜色？我真的想使用原生HTML5验证而不依赖我自己的验证脚本。

更新：可以说服Firefox删除以下覆盖的边框：

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

（http://jsfiddle.net/zbyzhbdm/7/的完整详情）

IE还要去弄清楚。

Answer 1

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