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和max值的元素

<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 -->

:invalid选择器根据输入的类型选择无效的元素。

<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 -->

：无效的选择器选择具有不根据元素设置验证的值的表单元素。

注意：无效选择器仅适用于具有限制的表单元素，例如具有最小和最大属性的输入元素，没有合法电子邮件的电子邮件字段或没有数字值的数字字段等。

提示：使用：valid选择器选择具有根据元素设置验证的值的表单元素。

来源：http://www.w3schools.com/cssref/sel_invalid.asp

参见简单演示：https://jsfiddle.net/bytdubk4/

Answer 3

仅当输入元素的值为＆＃34;超出范围＆＃34;时，超出范围的选择器才应用指定的样式。超出范围选择器仅适用于具有范围限制的元素，例如具有最小和最大属性的输入元素。

例如：可输入到输入字段的最大字符数为50.但是当用户尝试输入的字符数多于此数时，输入字段可以根据此处指定的样式（如红色高亮显示等）更改颜色

仅当输入元素的值为＆＃34;无效＆＃34;时，无效选择器才应用指定的样式。这仅适用于具有限制的表单元素，例如具有最小和最大属性的输入元素，没有合法电子邮件的电子邮件字段或没有数字值的数字字段等。因此，当用户输入的输入值呈现为false时或者将指定的样式应用于输入字段无效。

例如：当检测到输入电子邮件无效时，可以在向用户显示通知/指令时禁用输入字段。

它们之间的区别是：超出范围和：无效？

3 个答案: