ywork2020.com

Title

読み書き可能な要素を検知する

目次 (INDEX)

:read-writeとは

ここで説明する:read-write とは次の語句からなるCSSの疑似クラスです。
read
読み: リード
意味: 読む
write
読み: ライト
意味: 書く

目次に戻る

:read-write疑似クラスの概要

この疑似クラスはセレクタに該当する要素が入力可能、編集可能な設定である時に適用され一時的なプロパティ値の変更を行います。

これは入力要素に限らず、 contenteditable属性がtrueの要素も含まれます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。

:read-write{プロパティ名: 設定値;}
セレクター:read-write{プロパティ名: 設定値;}

目次に戻る

実機サンプルとサンプルコード

ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。

サンプルに使うのは編集不可の要素と編集可能な要素です。 この要素らに:read-write疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。

目次に戻る

参考: 読み書き可能な要素を検知する

このサンプルでは普通のdiv要素と編集可能なdiv要素、input要素text型、textarea要素を配置しています。 div要素は通常は書込みなど、編集をするための要素ではないですが、contenteditable属性を付けて編集可能な要素も用意しました。

div要素 (編集不可)
div要素 (編集可能)

CSSのコードではセレクターに:read-writeとだけ記述しているので「全ての編集可能な要素」を指しています。 例えばdiv:read-writeと記述すれば編集可能なdiv要素ということになります。

div{
	border: thin solid currentColor;
	padding: 5px;
}
:read-write{
	border: thin solid currentColor;
	background-color: ##moccasin;
	padding: 5px;
}
:read-write:hover{
	background-color: ##lightyellow;
}

目次に戻る