4

form私は pattern 属性をいじっていましたが、もちろん、必要なパターンに意図的に一致しない文字列を使用してを送信しようとしましたが、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 に答える