: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;
}