【css】 擬似クラス : disabled

HTMLでフォーム内に使用するinputタグやbuttonタグの機能を無効に出来るdisabled属性。

プログラムによってdisabledを付けた状態と通常状態のボタンの表示を切り替える際に
それぞれ個別にスタイルを設定したい場合、
擬似クラス : disabledを使用してそれぞれ別々のスタイル定義が可能となる。

buttonタグにdisabledを付けた例(値の送信を行えない)

 
disabledの有無でスタイルを切り替える。
– css –


※右側がdisabled時のスタイルを適用したボタン
 

 
擬似クラス :disabledによるスタイルの変更点

  • cursorプロパティをpointerからdefaultに変更
  • colorプロパティで文字色を変更
  • opacityプロパティでボタン全体の不透明度を下げる
デザインの適用により、押せない(無効な)ボタンを表現する事が出来た。

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください