百科狗-知识改变命运!
--

:in-range - 选择有限定范围的元素 - UI元素状态伪类选择器

梵高1年前 (2023-11-21)阅读数 20#技术干货
文章标签元素

:in-range

版本:CSS3

:in-range - 选择有限定范围的元素 - UI元素状态伪类选择器

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

语法:

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

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

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

:out-of-range

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

浏览器支持

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

例子

//HTML 
    values between 1 and 10 are valid.
  • your value is
//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.
  • your value is
.demo1 li{list-style: none; margin-bottom: 1em;}.demo1 input{border: 1px solid black;}.demo1 input:in-range{background-color: rgba(0, 255, 0, 0.25);}.demo1 input:out-of-range{background-color: rgba(255, 0, 0, 0.25); border: 2px solid red;}.demo1 input:in-range + label::after{content:'okay.';}.demo1 input:out-of-range + label::after{content:'out of range!';}
//HTML

你所输入的值

//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: '超出有效范围!请修改!'; }

你所输入的值

.demo2 p{height: 20px; text-align: left; text-indent: 20px;}.demo2 label,.demo2 button{cursor: pointer;}.demo2 input{width: 140px;}.demo2 input:in-range{background-color: rgba(153, 255, 51, 0.25);}.demo2 input:out-of-range{background-color: rgba(204, 51, 51, 0.25); border: 2px solid #CC3333;}.demo2 input:in-range+label::after{content:'在有效范围内.';}.demo2 input:out-of-range+label::after{content:'超出有效范围!请修改!';}

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)