是否可以使用CSS或JavaScript访问输入不匹配时出现的弹出窗口'；不匹配它的模式属性？

我在玩pattern属性，当然，我试图提交

表单

，提交的字符串故意与所需的模式不匹配，因为HTML：

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

提交

我试图使用

1

提交，这当然会导致浏览器（Chrome 21）进行错误处理：

我试图右键单击弹出窗口并“检查元素”，但就Web开发人员工具而言，我似乎是在检查

输入

元素（我认为这很有意义），而不是弹出对话框。所以，我想知道：是否可以通过JavaScript（用于响应性增强）或CSS（用于样式化）访问/交互此对话

主要目标是为用户增强提供高对比度的替代方案，或者只是与网站的样式和配色方案一致的弹出窗口

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

---

不同浏览器的弹出对话框有所不同。 没有办法设计这些样式（对于cross broser）

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

更多信息，您可以在此处找到：

---

可以设置弹出窗口的样式，但支持有限，仅适用于基于webkit的浏览器。至于其他浏览器，可能有类似的psuedoSelector可以使用，但我找不到

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

例如：

---

在Chrome的最新版本中，添加了对以下伪选择器的支持

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

查看一些信息

Firefox支持元素属性x-moz-errormessage，它允许您更改错误消息的文本。信息

---

找不到Firefox是否有办法设置错误气泡的样式。

related:@jbabey:wow；这似乎是一个实际的答案（至少在Webkit的情况下）。有几天我怀疑我错过了一个巨大的邮件列表…=）虽然我很高兴，从阅读问题中可以明显看出，要使用JavaScript，我宁愿使用本机浏览器功能，也不愿重新实现和/或解决它们。尽管浏览器兼容性/实现不完整。好的：）如果可能的话，尝试在其工作的浏览器中使用本机浏览器功能，如果有剩余的浏览器，您可以尝试使用JQuery对话框，这样您到处都可以找到解决方案。。