【css】 擬似クラス : disabled
HTMLでフォーム内に使用するinputタグやbuttonタグの機能を無効に出来るdisabled属性。
プログラムによってdisabledを付けた状態と通常状態のボタンの表示を切り替える際に
それぞれ個別にスタイルを設定したい場合、
擬似クラス : disabledを使用してそれぞれ別々のスタイル定義が可能となる。
buttonタグにdisabledを付けた例（値の送信を行えない）
|
1 2 3 4 5 |
<!--通常--> <button class="button" type="submit">buy</button> <!--送信出来ない--> <button disabled class="button" type="submit">soldout</button> |
disabledの有無でスタイルを切り替える。
– css –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.button{ width: 200px; padding: 20px; background-color: skyblue; color: white; font-size: 20px; border-radius: 10px; border: none; cursor: pointer; margin-left:30px; } .button:disabled{ cursor: default; color: red; opacity: 0.6; } |
※右側がdisabled時のスタイルを適用したボタン
擬似クラス :disabledによるスタイルの変更点
- cursorプロパティをpointerからdefaultに変更
- colorプロパティで文字色を変更
- opacityプロパティでボタン全体の不透明度を下げる
デザインの適用により、押せない（無効な）ボタンを表現する事が出来た。
Follow me!
