css3:in-range伪类

 

　　:in-range伪类选择器，用于对元素绑定的值在指定范围限制内时具有范围限制的元素进行样式设置。

 

　　换句话说，当它匹配元素的value属性值在其指定的范围限制内时，可以设置这些匹配元素的样式。

 

　　css3:out-of-range伪类

 

　　:out-of-range伪类选择器，用来指定当元素的有效值被限定在一段范围之内（使用min和max属性来指定范围），但实际输入值在该范围之外时使用的样式。

 

　　注意：:in-range伪类选择器和out-of-range伪类选择器都是只作用于能指定区间值的元素；无法选择任何其他没有数据范围限制或不是表单控件元素的元素。例如input元素中的min和max属性：

 

　　<inputtype="number">

 

　　这样的输入将具有使用min和max属性指定的可接受值范围。该value属性将保存输入的当前值。

 

　　<inputtype=“number”min=“1”max=“10”value=“8”>

 

　　说明：

 

　　与其他伪类选择器一样，:in-range伪类和:out-of-range都可以和其他选择器一起连用，比如说:hover和:focus选择器，当元素的值在允许的范围限制内时，为元素提供悬停样式；当元素的值超出允许的范围限制时，为元素提供焦点样式。

 

　　input:in-range:hover{

 

　　cursor:help;

 

　　}

 

　　input:out-of-range:focus{

 

　　border:2pxsolidtomato;

 

　　}

 

　　css3:in-range伪类和:out-of-range伪类的示例：

 

　　以下示例使用:out-of-range和:in-range伪类选择器在提供的值在指定范围之内或之外时对输入进行样式设置。尝试输入超出指定范围的值，以查看输入的样式是否更改。

 

　　html代码：

 

　　<divclass="container">

 

　　<p>值在1和10以内是，样式为绿色；但只要值在1和10之外，样式将是红色的。尝试将值更改为WITIN范围的值，以查看其样式更改。</p>

 

　　<inputid="range"type="number"min="1"max="10"value="12">

 

　　<labelfor="range"></label>

 

　　</div>

 

　　css代码：

 

　　

 

　　

 

　　body{

 

　　background-color:#F5F5F5;

 

　　color:#555;

 

　　font-size:1.1em;

 

　　font-family:'HelveticaNeue',Helvetica,Arial,sans-serif;

 

　　}

 

　　.container{

 

　　margin:40pxauto;

 

　　max-width:700px;

 

　　}

 

　　input{

 

　　width:100px;

 

　　height:40px;

 

　　font-size:1.4em;

 

　　margin-right:.6em;

 

　　}

 

　　input[type="number"]:in-range{

 

　　background-color:lightgreen;

 

　　color:green;

 

　　}

 

　　input:in-range+label::after{

 

　　content:"请输入一个介于1和10之间的值！";

 

　　}

 

　　input[type="number"]:out-of-range{

 

　　background-color:salmon;

 

　　border:1pxsolidtomato;

 

　　color:white;

 

　　}

 

　　input:out-of-range+label::after{

 

　　content:"此值超出范围，请重新输入！";

 

　　color:tomato;

 

　　}







本文转载自中文网