如果輸入與其模式屬性不匹配，是否可以使用CSS或JavaScript訪問顯示的彈出窗口？

Question

我正在使用pattern屬性，當然，在給定HTML的情況下，嘗試使用故意與所需模式不匹配的字符串提交form ：

<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以獲取兼容性信息：

• 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支持元素屬性x-moz-errormessage，使您可以更改錯誤消息的文本。 這里的信息

無法找到Firefox是否可以設置錯誤氣泡的樣式。

Answer 3

彈出對話框因瀏覽器而異。 無法為這些樣式設置樣式（對於跨兄弟）。

一種解決方法是使用JQuery的彈出對話框，您可以將其綁定到該事件。

有關此的更多信息，您將在這里找到：

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