css3的:out-of-range和:in-range伪类有什么用？（代码示例）【css教程】,css3,伪类,:out-of-range,:in-range

本篇文章给人人带来的内容是引见css3的:out-of-range和:in-range伪类有什么用？（代码示例），让人人相识:out-of-range伪类和:in-range伪类的作用和运用方法。有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你们有所协助。

css3 :in-range伪类

:in-range伪类挑选器，用于对元素绑定的值在指定局限限定内时具有局限限定的元素举行款式设置。

换句话说，当它婚配元素的value属性值在其指定的局限限定内时，能够设置这些婚配元素的款式。

css3 :out-of-range伪类

:out-of-range伪类挑选器，用来指定当元素的有效值被限定在一段局限之内（运用min和max属性来指定局限），但现实输入值在该局限以外时运用的款式。

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

<input type="number">

如许的输入将具有运用min和max属性指定的可接受值局限。该value属性将保留输入的当前值。

< input  type = “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: 2px solid tomato;
}

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

以下示例运用:out-of-range和:in-range伪类挑选器在供应的值在指定局限之内或以外时对输入举行款式设置。尝试输入超越指定局限的值，以检察输入的款式是不是变动。

html代码：

<div class="container">
  <p>值在1和10之内是，款式为绿色；但只需值在1和10以外，款式将是赤色的。尝试将值变动为WITIN局限的值，以检察其款式变动。</p>
  <input id="range" type="number" min="1" max="10" value="12">
  <label for="range"></label>
</div>

css代码：

body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.container {
  margin: 40px auto;
  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: 1px solid tomato;
  color: white;
}

input:out-of-range + label::after {
  content: "此值超越局限，请从新输入！";
  color: tomato;
}

运转结果：