有什么区别:超出范围和:无效？

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/