• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • :in-range

    版本:CSS3

    CSS伪类:in-range代表一个<input>元素,其当前值处于属性minmax限定的范围之内。该伪类可选定任意的<input>, 但只有在该元素指定了取值范围,并且元素值处于指定范围时才有效

    语法:

    E:in-range{sRules}
    • :in-range选择器匹配范围内的输入元素,用于标签的值在指定区间值时显示的样式。
    • :in-range选择器只作用于能指定区间值的元素,例如<input>元素中的minmax属性。
    • :in-range选择器只有在该元素指定了取值范围,并且元素值处于指定范围内时才有效。
    • :in-range选择器。浏览器兼容:IE不支持
    input:in-range {
      background-color: rgba(0, 255, 0, 0.25);
    }
    

    该伪类用于给用户一个可视化的提示,表示输入域的当前值处于允许范围内。

    注意:该伪类仅适用于那些拥有(或可以接受)取值范围设定的元素。若缺少此类设定,元素值就无所谓“in-range”和“out-range”。

    :out-of-range

    • 定义:针对一个<input>元素type=number,如果其当前值超出属性minmax限定的范围之内,修改样式。
    • 触发:只有在该元素指定了取值范围,并且元素值超出指定范围内时才有效。
    • 兼容:IE不支持

    浏览器支持

    IE不支持:in-range,其余浏览器都支持:in-range

    例子

    //HTML
    <form action="" id="form1">
      <ul>values between 1 and 10 are valid.
        <li>
          <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
          <label for="value1">your value is </label>
        </li>
      </ul>
    </form>
    
    //CSS
    
    li {
      list-style: none;
      margin-bottom: 1em;
    }
    
    input {
      border: 1px solid black;
    }
    
    input:in-range {
      background-color: rgba(0, 255, 0, 0.25);
    }
    
    input:out-of-range {
      background-color: rgba(255, 0, 0, 0.25);
      border: 2px solid red;
    }
    
    input:in-range + label::after {
      content: 'okay.';
    }
    
    input:out-of-range + label::after {
      content: 'out of range!';
    }
    
      values between 1 and 10 are valid.
    //HTML
    <p>      
        <input id="val" name="val" type="number" placeholder="1到10之间(含)有效" min="1" max="10" value=1 />
        <label for="val">你所输入的值</label>
      </p>
    
    //CSS
    
    p{
      height: 20px;
      text-align: left;
      text-indent: 20px;
    }
    label,button{
      cursor: pointer;
    }
    input{
      width: 140px;
    }
    input:in-range {
      background-color: rgba(153, 255, 51, 0.25);
    }
    input:out-of-range {
      background-color: rgba(204, 51, 51, 0.25);
      border: 2px solid #CC3333;
    }
    input:in-range+label::after {
      content: '在有效范围内.';
    }
    input:out-of-range+label::after {
      content: '超出有效范围!请修改!';
    }
    

    上篇::required

    下篇::out-of-range