範囲外と無効の違いは何ですか？

Question

例

input[type="number"] { 
    background: white; 
    color: black; 
} 
input[type="number"]:in-range { 
    background: green; 
    color: white; 
} 
input[type="number"]:out-of-range { 
    background: red; 
    color: white; 
} 

<input c type="number" min="1" max="100"> 

:out-of-rangeと:invalidの違いは何ですか？

Answer 1

:out-of-rangeセレクタ組minと:invalidセレクタが入力された入力内容に応じて無効である要素を選択する入力

<input type="number" min="5" max="10" value="17"> <!-- Gets selected with :out-of-range --> 
<input type="number" min="5" max="10" value="8"> <!-- Does not get selected with :out-of-range --> 

max

の値外にある値を持つ要素を選択します。

<input type="email" value="abc@gmail.com"> <!-- Is a valid e-mail address and does not get selected with :invalid --> 
<input type="email" value="foo"> <!-- Is not a valid e-mail address and gets selected with :invalid --> 

JSFiddle

Answer 2

それは簡単ですが、一部のブラウザでは、これらの機能をサポートしていないことを覚えておいてください。

：範囲外の

<input type="date" name="dateCheck" min="2000-01-01" max="2016-07-06"> 
<!-- in this case if you enter date after 2016-07-06 input:out-of-range will match --> 

：範囲外のセレクタは、指定された範囲外の値を持つすべての要素を選択します。

注：範囲外セレクタは、最小および最大属性を持つ入力要素など、範囲の制限がある要素に対してのみ機能します。

ヒント：範囲内セレクタを使用して、指定範囲内の値を持つすべての要素を選択します。

源：http://www.w3schools.com/cssref/sel_out-of-range.asp

：範囲外の

：無効

<input type="date" name="dateCheckInvalid" min="2016-07-06"> 
<!-- in this case if u enter date before 2016-07-06 input:invalid will match --> 

におけるレンジものバージョンを反転させます：無効なセレクタs要素の設定に従って検証されない値を持つフォーム要素を選択します。

注：数値なしで無効なセレクタのみ、このような分と入力要素として、制限付きでフォーム要素のために働くとmax属性、法的な電子メールなしで電子メールのフィールド、または数値フィールドなど

ヒント：有効なセレクタを使用して、要素の設定に従って検証する値を持つフォーム要素を選択します。

ソース：https://jsfiddle.net/bytdubk4/

Answer 3

範囲外のセレクタは、入力要素の値が「範囲外」である場合にのみ、指定されたスタイルを適用します。http://www.w3schools.com/cssref/sel_invalid.asp

は簡単なデモを参照してください。範囲外セレクタは、minおよびmax属性を持つ入力要素など、範囲の制限がある要素に対してのみ機能します。

例：入力フィールドに入力できる最大文字数は50です。しかし、それ以上入力しようとすると、入力フィールドはここで指定されたスタイル（赤いハイライトなど）。

無効なセレクタは、入力要素の値が "無効"の場合にのみ、指定されたスタイルを適用します。これは、最小および最大の属性を持つ入力要素、正式な電子メールのない電子メールフィールド、数値のない数字フィールドなど、制限のあるフォーム要素でのみ機能します。したがって、ユーザーが入力した入力値がfalseまたは無効です。指定したスタイルが入力フィールドに適用されます。

例： 入力メールが無効であると検出された場合、ユーザーに通知/指示が表示されている間に入力フィールドを無効にすることができます。