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