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

:read-only 疑似クラス CSS プロパティとは

トピック：readonlyである要素を選択する ことができる readonly属性を持つフォーム要素は 読み取り専用として定義される。ユーザーが編集できない要素（ロックされた欄など）を表す

疑似クラス セレクター :read-only

    使用上の注意：
  • 現在のところ、ほとんどのブラウザでは、:read-onlyセレクタはinput要素とtextarea要素にのみ 適用される が、「読み取り専用」であるすべての要素に適用することが、必要 です。

実例 コード 1

サンプル コードを試す
    input:-moz-read-only { 
        background-color: red;
    }
    /* 読み取り専用の <input> 要素を選択 */
    /* Firefox では接頭辞付きで対応 */

    input:read-only { 
         background-color: red;
    }
    /* Blink/WebKit/Edge では接頭辞なしで対応 */
    使用上の注意：
  • メモ: このセレクターは <input> 要素に readonly が設定されているものだけを選択するので はない 。ユーザーが編集できないあらゆる要素を選択する ことができる。

実例 コード 2

サンプル コードを試す
    <input  type="text" value="ここに入力してください">
    <input type="text" value="これは読み取り専用の入力欄" readonly>
    <p>これは普通の段落</p>
    <p contenteditable="true">    この段落は編集可能</p>

構文

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

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

PropertyDesktop 互換性
:read-onlyChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯ありフルサポート◯ありフルサポート◯ありサポートなし✖フルサポート◯ありフルサポート◯あり

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

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

Html

Glossary

PHP

JavaScript

JQuery

CSS