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

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

トピック：読み込み可能と 書き込み可能のフォーム要素を選択することができる readonly属性を持たず、disabled属性を持たないフォーム要素は、readとwriteableとして定義される

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

    使用上の注意：
  • ほとんどのブラウザでは、:read-writeセレクタは、要素が無効かどうかに関わらず 、readonly属性が存在しないinputおよびtextarea要素にのみ 適用される

実例 コード 1

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

     input:read-write { 
         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-write { css : properties ; }
 疑似クラス名 {スタイル要素のプロパティ : プロパティ値; }
CSS バージョンCSS 3

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

PropertyDesktop 互換性
:read-writeChromeEdgeFirefoxInternet ExplorerOperaSafari
基本 サポートフルサポート◯ありフルサポート◯ありフルサポート◯ありサポートなし✖フルサポート◯ありフルサポート◯あり
<input>と<textarea>ではない編集可能要素に一致サポートなし✖サポートなし✖フルサポート◯ありサポートなし✖サポートなし✖サポートなし✖

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

PropertyMobile 互換性
:read-writeAndroidChrome for Android
Edge MobileFirefox for Android
Opera for Android
iOS SafariSamsung Internet
基本 サポート 不明フルサポート◯ありフルサポート◯ありフルサポート◯あり 不明 不明フルサポート◯あり
<input>と<textarea>ではない編集可能要素に一致サポートなし✖サポートなし✖サポートなし✖フルサポート◯ありサポートなし✖サポートなし✖サポートなし✖
：:read-write 疑似クラス 関連記事
CSS :read-write 疑似クラス| CSS:スタイルシート 関数 要素 使い方・書き方 例 CSS サンプル
CSS :read-write 疑似クラス | CSS プロパティ 値| 意味 使い方 実例 – WebRef
あわせて読みたい

Html

Glossary

PHP

JavaScript

JQuery

CSS