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

CSS @ルール（RULES）

CSS属性全書

CSS :out-of-range選択子

:out-of-range CSS パseudo-classは、属性 min と max で指定された範囲外にある<input>要素を表します。注意：このパseudo-classは、値の範囲を設定する（または設定できる）要素にのみ適用されます。この設定が欠如している場合、要素の値は「in」の意味を持たないと考えられます。-range”と“out-range

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

オンラインの例

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

例

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

テストを見てみる ‹/›

定義と使用

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

注意： 　:out-of-range 選択子は、範囲を指定できない要素に対してのみ作用し、例えば input 要素の min と max 属性です。

ブラウザの互換性

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

選択子
:out-of-range	10.0	不支持	28.0	5.2	11.0

CSS 语法

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

このパseudo-classは、ユーザーに、入力フィールドの現在の値が許可範囲外にあることを視覚的に示すために使用されます。