:in-range - 选择有限定范围的元素 - UI元素状态伪类选择器
:in-range
版本:CSS3
CSS伪类:in-range
代表一个元素,其当前值处于属性min和max限定的范围之内。该伪类可选定任意的
,但只有在该元素指定了取值范围,并且元素值处于指定范围时才有效
语法:
E:in-range{sRules}:in-range
选择器匹配范围内的输入元素,用于标签的值在指定区间值时显示的样式。:in-range
选择器只作用于能指定区间值的元素,例如元素中的min和max属性。
: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,如果其当前值超出属性min和max限定的范围之内,修改样式。
- 触发:只有在该元素指定了取值范围,并且元素值超出指定范围内时才有效。
- 兼容:IE不支持。
浏览器支持
IE不支持:in-range ,其余浏览器都支持:in-range |
例子
//HTML
- values between 1 and 10 are valid.
- your value is
- values between 1 and 10 are valid.
- your value is
//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)
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)