提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 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;
}

运转结果:

我们运用:in-range伪类挑选器挑选和设置值在1到10的局限时,款式为绿色;但当值1~10以外时,款式为赤色,以作警示提示。

总结:以上就是本篇文章的全部内容,愿望能对人人的进修有所协助。相干视频教程引荐:css3教程!

以上就是css3的:out-of-range和:in-range伪类有什么用?(代码示例)的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"css3的:out-of-range和:in-range伪类有什么用?(代码示例)【css教程】,css3,伪类,:out-of-range,:in-range"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线