web-dev-qa-db-ja.com

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

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

csshtml5html5-validation
34
Kyle

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

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

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

8
Ramin

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

::-webkit-validation-bubble

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

::-webkit-validation-bubble-arrow 

::-webkit-validation-bubble-message

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

4
Estelle

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

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

これらの完全なリファレンスが必要な場合は、 Mozillaのリファレンス に進んでください。

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

2
Remixz

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

 input:invalid { 
border:solid red;
}

詳細情報 http://msdn.Microsoft.com/en-us/library/ie/hh772367（v = vs.85）.aspx

1
GANI

Google Chromeでは、検証メッセージのスタイルを設定できなくなりました。 https://code.google.com/p/chromium/issues/detail?id=25905

0
Udi