4

我正在使用模式属性，当然，尝试form使用故意与所需模式不匹配的字符串提交，给定 HTML：

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

JS 小提琴演示。

我尝试使用 提交1，这当然会导致浏览器（Chrome 21）进行错误处理：

我试图右键单击弹出窗口并“检查元素”，但就 Web 开发人员工具而言，我似乎正在检查input元素（我想这是有道理的），而不是弹出窗口对话。所以，我想知道：是否可以通过 JavaScript（用于响应增强）或 CSS（用于样式）访问/交互此对话？

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

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

4

3 回答 3

3

可以对弹出窗口进行样式设置，但支持有限且仅适用于基于 webkit 的浏览器。至于其他浏览器，您可能可以使用类似的伪选择器，但我无法找到它们。

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

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

文件

于 2012-08-23T12:53:14.830 回答
2

在 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 是否有办法设置错误气泡的样式。

于 2012-08-23T13:01:31.843 回答
0

弹出对话框因浏览器而异。没有办法为这些设置样式（对于跨兄弟）。

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

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

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

于 2012-08-23T12:51:02.817 回答