web-dev-qa-db-ja.com

HTML5必須入力スタイル

HTML 5では、入力をrequiredとしてマークし、CSSの[required]疑似セレクターで選択できます。ただし、必要な要素を入力せずにフォームを送信しようとしたときにのみ、スタイルを設定します。これのセレクターはありますか？ポップアップする小さなメッセージボックスはどうですか？

htmlcssvalidationrequired
21
Xodarap

SLaksが言ったように、これを行うCSSセレクターはありません。 CSSは入力の内容をチェックする必要があるため、これがCSSの範囲に含まれることはないと思います。

それでも、実際にフォームを送信するのではなく、ボタンをクリックしたときにJavaScript検証関数を呼び出すのが最善の方法です。次に、[必須]フィールドで適切なコンテンツを確認し、フォームを送信するか、入力されていない必須フィールドを強調表示します。

JQueryには、これを処理する素敵なプラグインがいくつかあります http://docs.jquery.com/Plugins/validation

4
NikoRoberts

：validおよび：invalidセレクターを使用できます。このようなもの

.field:valid {
    border-color:#0f0;
}
.field:invalid {
    border-color:#f00;
}

ただし、これは、ネイティブの検証をサポートするブラウザーでのみ機能し、意味のあるフィールドでのみ機能します。私の知る限り、これはChrome（たぶんSafariですが、チェックされていません）を意味するだけです。

つまり、ネイティブ検証とは、chromeを行う場合、<input type="email">フィールドの値は、電子メールタイプの文字列（追加のJavaScriptなし）で検証されるため、上記のスタイルが機能します。ただし、それらをtype="text"フィールド、または2番目のパスワードフィールド（最初のパスワードフィールドと一致すると想定）の場合、すべてが有効であるため、緑になるだけです。パスワードの場合、いずれにしても「タイプ」はありません。

つまり、すべてのブラウザーをサポートするには、さらに重要なことに、JavaScriptに頼らざるを得ない幅広い検証を行う必要があります。この場合、.valid/.invalidクラスの割り当ては問題になりません。 :)

29
Ilia Draznin

私はjsを使用して、送信時にフォームに.validatedのクラスを適用し、そのクラスを使用して：invalid fields.egをスタイルしました：

.validated input:invalid { ... }

この方法では、フォームが送信された後でのみ、ページの読み込み時にフィールドが無効として表示されません。理想的には、送信時にフォームに適用される疑似クラスがあるでしょう。

12
Toby
input:required {
    /* Style your required field */
    /* Be sure to style it as an individual field rather than just add your desired styles
    for a required field. */
}

クロムで試してテストしました。他のブラウザではテストしていません。

2
JustSomeGuy

あります :user-errorCSS Selectors 4ワーキングドラフト の疑似クラスは、これを正確に実行し、入力ブラーとフォーム送信の両方で起動します。

それまでの間、私は個人的に、：user-errorをカバーする素晴らしい webshims polyfillライブラリ を使用しています。

2
Kevin C.

このソリューションは、属性whileを介して必要な入力フィールドを空白にします。ブラウザーは、キーダウン時に必須フィールドに入力するときに、：invalid疑似クラスを削除します。 Firefoxの最近のバージョンでは、このスタイルに似たものが自動的に適用されますが、ChromeおよびIEは適用されません。

input[required]:invalid { box-shadow: 0 0 3px 1px red }

試してみてください： http://jsfiddle.net/2Ph2X/

1
TaeKwonJoe

非常にシンプルで、要素がフォーカスされているときにクラスを追加するだけで、送信中に不正な要素にフォーカスが移り、クライアントは1つずつ入力して検証します。JavaScriptを使用せずに最適なソリューションだと思います。

input:required:focus {
   border-color: palegreen;
}
input:invalid:focus {
   border-color: salmon;
}
0
Navi