是否可以使用CSS或JavaScript访问如果输入与其模式属性不匹配而出现的弹出？

Question

我正在处理模式属性，当然，我尝试使用一个字符串提交form，该字符串故意与所需的模式不匹配，考虑到HTML：

<form action="#" method="post">
    <input type="text" pattern="[A-Z]{2,3}" />
    <button type="submit">Submit</button>
</form>

JS Fiddle演示。

我尝试使用1提交，这当然导致浏览器(Chrome 21)处理错误：

​

​

我试图右键点击弹出，并‘检查元素’，但就Web开发工具而言，我似乎是在检查input元素(我认为这是有意义的)，而不是弹出对话。因此，我想知道:是否可以通过JavaScript (用于响应性增强)或CSS (用于样式化)访问/交互此对话？

主要目标是为用户增强提供高对比度的替代方案，或者简单地提供与网站的样式和颜色方案相一致的弹出效果。

编辑后链接到MDN以获得兼容性信息：

• HTML 5表单属性兼容性。

Answer 1

弹出窗口的样式是可能的，但是支持是有限的，并且只适用于基于webkit的浏览器。至于其他浏览器，您可以使用类似的psuedoselector，但我找不到它们。

归根结底，它能够找到/知道这些弹出窗口的DOM结构，然后添加将修改它们的CSS。毕竟，它们只是DOM元素。

示例：http://jsfiddle.net/zbwJP/1/

文档

Answer 2

在最新的Chrome迭代中，增加了对以下伪选择器的支持

::-webkit-validation-bubble{}
::-webkit-validation-bubble-top-outer-arrow{}
::-webkit-validation-bubble-top-inner-arrow{}
::-webkit-validation-bubble-message{}

查看这里以获得一些信息

Firefox支持元素属性error错误消息，它允许您更改错误消息的文本。信息这里

无法找到Firefox是否有一种设计错误气泡的方法。

Answer 3

弹出对话框因浏览器而异.没有办法为这些(交叉布洛瑟)风格。

一个解决办法是使用JQuery的弹出对话框，您可以将其绑定到该事件。

更多关于这一点，你会发现这里：

http://jqueryui.com/demos/dialog/