:disabledとは
- ここで説明する:disabled とは次の語句からなるCSSの疑似クラスです。
- disabled
- 読み: ディセーブル
意味: 無効
:disabled疑似クラスの概要
この疑似クラスはセレクタに該当する要素が無効の時に適用され一時的なプロパティ値の変更を行います。
つまり、要素にdisabled属性が付いている時、 あるいはjavascriptでいうdisabledプロパティがtrueの時にCSSで設定しているプロパティ値が有効になるということです。
構文
サンプルを見る前に構文を確認しておきます。この疑似クラスの記述は以下のような書き方になります。
セレクター:disabled{プロパティ名: 設定値;}実機サンプルとサンプルコード
ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
サンプルに使うのはbutton要素です。 この要素に:disabled疑似クラスを使ってプロパティ値の一時的な変更を見てみたいと思います。
参考: 要素が無効である時を検知する
ここではサンプルとしてボタンが無効になった時にボタンのテキストを細文字に変更します。 また、チェックボックスを用意してチェックの有無でボタンの有効と無効を切り替えることができるようにしています。
<button disabled>ボタン</button>
checkbox:
button{
font-weight: bold;
}
button:disabled{
font-weight: lighter;
}