38

CSS を使用して HTML5 フォーム検証エラー メッセージのスタイルを設定するにはどうすればよいですか?

4

4 に答える 4

11

現在、これらの小さな検証ツールチップのスタイルを設定する方法はありません。私が選択した唯一の他のオプションは、ブラウザの検証をすべて無効にして、独自のクライアント側の検証スクリプトに依存することです。

この記事によると: http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4

「オプトアウトする最も簡単な方法は、novalidate属性をに追加することです。送信コントロールにformnovalidate<form>を設定することもできます。」

于 2011-05-20T13:54:31.180 に答える
5

更新:このメソッドは廃止されました。

Chrome は、検証エラーの吹き出しにネイティブのルック アンド フィールを提供します。エラー バブルは、規範的な要素ではない 4 つの要素で構成されています。これらの 4 つの要素は、バブルの個別のセクションに適用される疑似要素を介してスタイルを設定できます。

::-webkit-validation-bubble
 
::-webkit-validation-bubble-arrow-clipper 

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message
于 2011-07-02T08:15:59.967 に答える
3

easwee が言ったように、擬似セレクターを使用します。たとえば、フォーム要素が有効な場合は緑に、無効な場合は赤にするには、次のようにします。

:invalid {
    background: #ffdddd;
         }
:valid{
      background:#ddffdd;
      }

これらの完全なリファレンスが必要な場合は、Mozilla のリファレンスにアクセスしてください。

PSこれらの回答が間違っている場合は申し訳ありません。このコミュニティは初めてです。

于 2011-03-29T22:01:41.797 に答える
1

正しい入力が入力されるまで、必須フィールドは無効になります。URL フィールドなど、必須ではないが検証が必要なフィールドは、テキストが入力されるまで有効です。

 input:invalid { 
border:solid red;
}

詳細についてはhttp://msdn.microsoft.com/en-us/library/ie/hh772367(v=vs.85).aspx

于 2014-05-01T19:00:21.597 に答える