CSSリファレンスマニュアル

CSS @ルール（RULES）

CSS属性全書

CSS関数（Functions）CSS選択子全書

CSS :in-range選択子

in-range CSS 伪类代表一个input元素，其当前值处于属性min 和max 限定的范围之内。注意：该伪类仅适用于那些拥有（或可以接受）取值范围设定的元素。若缺少此类设定，元素值就无所谓“in-range-range

完全なCSS選択子リファレンスマニュアル

オンラインの例

指定された範囲内の値が入力された場合、指定されたスタイルを設定します:

例

!DOCTYPE　html>
<html>
<head>
<meta　charset="utf-8">　
<title>基本のチュートリアル(oldtoolbag.com)</title>　
<style>
input:in-range
{
　　　　border:2px　solid　orange;
}
</<style>
</<head>
<body>
<h3>:in-range　選択子の例を示します。</h3>
<input　type="number"　min="8"　max="18"　value="9"　/>
<p>inputに値を入力してください　(小さい　8　または　より大きい　18),　スタイルの変更を確認してください。</p>
</body>
</html>

テストを見てみましょう ‹/›

定義と使用

:in-range 選択子は、タグの値が指定された範囲値にある場合に表示されるスタイルを定義します。

注意： 　:in-range 選択子は、範囲値を指定できる要素（例えば、input要素のminおよびmax属性）に対してのみ作用します。

ブラウザの互換性

テーブルの数字は、その属性をサポートする最初のブラウザのバージョン番号を示します。

選択子
:in-range	10.0	サポートされていません	28.0	5.2	11.0

CSS 语法

/*　このパseudo-classは任意の<input>を選択できますが、その要素が値の範囲を指定していて、要素の値が指定された範囲にある場合のみ有効です。*/
input:in-range　{
　　background-color:　rgba(0,　255,　0,　0.25);
}

このパseudo-classは、ユーザーに視覚的なヒントを提供し、入力フィールドの現在の値が許可範囲にあることを示します。