CSS :in-range 疑似クラス| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル

:in-range 疑似クラス CSS プロパティとは

トピック:範囲内セレクタは、指定された範囲内の値を持つすべての要素を選択する ことができる CSS :in-range疑似クラスは、現在の値が min および max 属性による制限範囲内にある <input> 要素を表する

疑似クラス セレクター :in-range

実例 コード 1

サンプル コードを試す
    input:in-range { 
        border: 2px solid red;
    }

    /* 入力範囲が設定されていて、値がその範囲に該当する <input> 要素をすべて選択 */
    情報:
  • この擬似クラスは、入力フィールドの現在の値が許可された許容範囲内にあることをユーザーに視覚的に示すことができる。
  • :out-of-range セレクタを使用して、指定した範囲外の値を持つすべての要素を選択する ことができる。
    使用上の注意::in-rangeセレクタは、最小および最大の属性を持つ入力要素など、範囲の制限がある要素に対してのみ機能する ことができる。

構文

:in-range { css : properties ; }
 疑似クラス名 {スタイル要素のプロパティ : プロパティ値; }
CSS バージョンCSS 3

サポートするデスクトップ ブラウザ対応・互換性

PropertyDesktop 互換性
:in-rangeChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯10フルサポート◯ありフルサポート◯29サポートなしフルサポート◯11フルサポート◯あり

サポートするモバイル ブラウザ対応・互換性

PropertyMobile 互換性
:in-rangeAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポートフルサポート◯2.3 不明フルサポート◯ありフルサポート◯16フルサポート◯ありフルサポート◯あり 不明
:in-range 疑似クラス 関連記事
CSS :in-range 疑似クラス| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS :in-range 疑似クラス | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS