14

required 属性を使用するときに HTML5 入力フィールドに表示されるヒントのスタイルを設定することはできますか? 何を言っているのかわからない場合は、何も入力せずにこのフォームの [送信] をクリックしてください。ヒントのポップアップが表示されます。

http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html

CSS ソースを確認しましたが、ヒントに関するものは何も表示されませんでした。

div 要素をリセット方式でスタイリングすると、表示方法に影響することがわかりました。しかし、それを具体的にターゲットにする方法がわかりません。

注意: プレースホルダーについて言及しているわけではありません。

乾杯、トーマス。

4

4 に答える 4

13

div セレクターでエラー バブルのスタイルを設定できる理由は、Chrome 11/12 のバグであり、新しいバージョンで修正する必要があります。Chrome 12 (および Safari6 ではおそらく) でエラー バブルのスタイルを設定する疑似クラスがいくつかあります (::-webkit-validation-bubble など)。次のドキュメントで、疑似要素セレクターといくつかのスタイリング例を含む完全な HTML 構造を見つけることができます。

これは、HTML5 フォーム制約の検証に対する Webkit 拡張であり、非標準であることに注意してください。HTML5 検証をサポートするすべてのブラウザーでエラー メッセージのスタイルを設定する方法を使用する場合は、JavaScript を使用する必要があります。

これの重要な原則は、ハンドラーを無効なイベントに追加し (注: 無効なイベントはバブリングしません)、デフォルトの相互作用を防止する必要があるということです。これにより、ブラウザーのネイティブ エラー バブルが削除され、すべての HTML5 ブラウザーでスタイル設定可能なカスタム UI を実装できるようになります。

//Note: that we use true for useCapture, because invalid does not bubble
document.addEventListener('invalid', function(e){
    //prevent the browser from showing his error bubble
    e.preventDefault();
    //now you can implement your own validation UI (showError is a Custom method which has to be implemented by you
    showError(e.target, $.prop(e.target, 'validationMessage');
}, true);

上記のコードは、現在のフォーム内のすべての無効な要素に対して showError を呼び出します。最初の無効な要素に対してのみこれを行いたい場合は、次のことができます。

document.addEventListener('invalid', (function(){
    var isFirst = true;
    return function(e){
        //prevent the browser from showing his error bubble
        e.preventDefault();
        //now you can implement your own validation UI
        if(isFirst){
            showError(e.target, $.prop(e.target, 'validationMessage');
            //set isFirst to false
            isFirst = false;
            //reset isFirst to true, so user can try to submit invalid forms multiple times
            setTimeout(function(){
                isFirst = true;
            }, 9);
        }
    };
})(), true);

サイトで jQuery を使用している場合は、webshims libを使用することをお勧めします。webshims lib は、すべてのブラウザー (IE6 を含む) で HTML5 制約の検証を実装し、単純なカスタムのスタイル設定可能な検証メッセージを生成するための単純な拡張機能を提供します。JS コードは次のようになります。

$(document).bind('firstinvalid', function(e){
    $.webshims.validityAlert.showFor( e.target ); 
    //prevent browser from showing native validation message 
    return false; 
});

によって生成される HTML 構造は$.webshims.validityAlert.showFor次のようになります。

<span class="validity-alert" role="alert"> 
    <span class="va-arrow"><span class="va-arrow-box"></span></span> 
    <span class="va-box">Error message of the current field</span> 
</span>
于 2011-07-13T11:13:40.467 に答える
5

次の疑似セレクターを使用して、Webkitで検証バブルのスタイルを設定できます。

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

Mozillaブラウザの場合、まだ方法はありません。x-moz-errormessageテキストを変更したい場合、Mozillaはサポートします： https ：//developer.mozilla.org/en/HTML/element/input#section_5

于 2011-07-18T11:43:16.493 に答える
2

ヒントが表示されないようにする方法を見つけました。

基本的に、これを一番上に追加すると、リセットで div 要素内にあることがわかりました。

div { display: none; }
body div { display: block; }

その後、ヒントは表示されなくなりますが、残りの div は正常に動作します。

また、ヒントは HTML 文書タグの外にあると信じ込まされています。html div を使用したスタイリングもヒントには影響しません。興味深いもの。

ただし、これはChromeでのみ機能します。

于 2011-04-14T08:28:39.063 に答える
0

Opera と Chrome が使用するというヒントを参照している場合は、残念ながら使用できません。

于 2011-04-14T08:01:09.050 に答える