ywork2020.com

Title

要素の読み取り専用属性を検知する

目次 (INDEX)

:read-onlyとは

ここで説明する:read-only とは次の語句からなるCSSの疑似クラスです。
read
読み: リード
意味: 読む
only
読み: オンリー
意味: 唯一の、たった一人の、~だけ(読むだけ)

目次に戻る

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

この疑似クラスはセレクターに該当する要素の読み取り専用の属性を検知して一時的なプロパティ値の変更を行います。

要素に readonly 属性が付いている場合やjavascriptを使ったreadOnlyプロパティの変更などを検知してスタイルを変化させることが可能です。

目次に戻る

構文

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

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

目次に戻る

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

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

サンプルではinput要素のtext型を使用しています。

目次に戻る

参考: 要素の読み取り専用属性を検知する

このサンプルではinput要素のcheckbox型とtext型を使用しています。 チェックボックスにチェックが入るとテキストボックスは読み書き可能な状態になります。 チェックボックスからチェックを外すとテキストボックスは読み取り専用の状態になります。


input[type="text"]{
	border-style: solid;
	background-color: ##lightyellow;
}
input[type="text"]:read-only{
	border-style: dashed;
	background-color: ##aliceblue;
}

目次に戻る