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

Question

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

Chrome的行为符合我的喜好，没有任何边界，但是IE11和Firefox显示的是该字段的红色。

我尝试添加以下内容：

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

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

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

有什么办法去除红色边框/它设置为不同的颜色？我真的很喜欢使用本机HTML5验证，而不诉诸我自己的验证脚本。

更新：火狐可以说服与以下重写删除边框：

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

（在http://jsfiddle.net/zbyzhbdm/7/全部细节）

IE仍然去弄清楚。

Answer 1

尝试css属性outline而不是border。