:enabledとは
- ここで説明する:enabled とは次の語句からなるCSSの疑似クラスです。
- enable
- 読み: イネーブル
意味: 有効、可能
:enabled疑似クラスの概要
この疑似クラスはセレクタに該当する入力要素が有効である時に適用され一時的なプロパティ値の変更を行います。
有効であるとは入力要素がフォーカスを得ることができる状態であり、「選択」、「クリック」、「入力」などができることを指しています。 これを単純にいってしまうと、要素に disabled 属性が付いていないことであり、javascriptでいうならばdisabledプロパティがfalseの状態を意味します。
構文
サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。
セレクター:enabled{プロパティ名: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルに使うのはinput要素です。 この要素に:enabled疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。
参考: 要素が有効な状態であることを検知する
ここではサンプルとして有効な入力要素はフォントサイズが大きく表示されるようにしています。
input{
font-size: 100%;
}
input:enabled{
font-size: 150%;
}