您好,登錄后才能下訂單哦!
這篇文章主要介紹css3中:out-of-range和:in-range偽類的作用,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
css3 :in-range偽類
:in-range偽類選擇器,用于對(duì)元素綁定的值在指定范圍限制內(nèi)時(shí)具有范圍限制的元素進(jìn)行樣式設(shè)置。
換句話說(shuō),當(dāng)它匹配元素的value屬性值在其指定的范圍限制內(nèi)時(shí),可以設(shè)置這些匹配元素的樣式。
css3 :out-of-range偽類
:out-of-range偽類選擇器,用來(lái)指定當(dāng)元素的有效值被限定在一段范圍之內(nèi)(使用min和max屬性來(lái)指定范圍),但實(shí)際輸入值在該范圍之外時(shí)使用的樣式。
注意: :in-range偽類選擇器和out-of-range偽類選擇器都是只作用于能指定區(qū)間值的元素;無(wú)法選擇任何其他沒有數(shù)據(jù)范圍限制或不是表單控件元素的元素。例如 input 元素中的 min 和 max 屬性:
<input type="number">
這樣的輸入將具有使用min和max屬性指定的可接受值范圍。該value屬性將保存輸入的當(dāng)前值。
< input type = “number” min = “1” max = “10” value = “8” >
說(shuō)明:
與其他偽類選擇器一樣,:in-range偽類和:out-of-range都可以和其他選擇器一起連用,比如說(shuō):hover和:focus選擇器,當(dāng)元素的值在允許的范圍限制內(nèi)時(shí),為元素提供懸停樣式;當(dāng)元素的值超出允許的范圍限制時(shí),為元素提供焦點(diǎn)樣式。
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偽類選擇器在提供的值在指定范圍之內(nèi)或之外時(shí)對(duì)輸入進(jìn)行樣式設(shè)置。嘗試輸入超出指定范圍的值,以查看輸入的樣式是否更改。
html代碼:
<div class="container"> <p>值在1和10以內(nèi)是,樣式為綠色;但只要值在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: "請(qǐng)輸入一個(gè)介于1和10之間的值!"; } input[type="number"]:out-of-range { background-color: salmon; border: 1px solid tomato; color: white; } input:out-of-range + label::after { content: "此值超出范圍,請(qǐng)重新輸入!"; color: tomato; }
運(yùn)行效果:
我們使用:in-range偽類選擇器選擇和設(shè)置值在1到10的范圍時(shí),樣式為綠色;但當(dāng)值1~10之外時(shí),樣式為紅色,以作警示提醒。
以上是“css3中:out-of-range和:in-range偽類的作用”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。