CSSのdisabled属性と擬似クラスを使って無効ボタンのスタイルを変更する方法
2024-04-02
CSSで無効ボタンをスタイリングする方法
方法
disabled 属性と擬似クラスを組み合わせることで、無効ボタンにだけスタイルを適用できます。
<button type="button" disabled>ボタン</button>
button:disabled {
/* 無効ボタンのスタイル */
background-color: #ccc;
color: #666;
border: 1px solid #ddd;
}
pointer-events プロパティを使って、無効ボタンへのマウスイベントを無効化できます。
<button type="button" disabled>ボタン</button>
button:disabled {
pointer-events: none;
}
opacity プロパティを使って、無効ボタンの透明度を変更できます。
<button type="button" disabled>ボタン</button>
button:disabled {
opacity: 0.5;
}
- 上記以外にも、
filterプロパティやtransformプロパティなどを使って、無効ボタンに様々なスタイルを適用できます。 - 無効ボタンのデザインは、サイト全体のデザインと統一感を出すようにしましょう。
- 無効ボタンはクリックできないことをユーザーに分かりやすく伝えるようにしましょう。
例
以下の例では、disabled 属性と擬似クラスを使って、無効ボタンの背景色と色を変更しています。
<button type="button" disabled>ボタン</button>
<style>
button:disabled {
background-color: #ccc;
color: #666;
}
</style>
実行結果：
CSSを使って、無効ボタンのデザインを自由にカスタマイズすることができます。上記の解説を参考に、サイトのデザインに合った無効ボタンを作ってみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>無効ボタンのサンプル</title>
<style>
button {
background-color: #000;
color: #fff;
border: 1px solid #fff;
padding: 10px 20px;
margin: 10px;
}
button:disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
}
</style>
</head>
<body>
<button type="button">有効なボタン</button>
<button type="button" disabled>無効なボタン</button>
</body>
</html>
説明
buttonセレクタは、すべてのボタンにスタイルを適用します。background-colorプロパティは、ボタンの背景色を設定します。cursorプロパティは、マウスカーソルをどのように表示するかを設定します。
- 上記のコードは基本的な例です。必要に応じて、他のプロパティを使って無効ボタンのデザインをカスタマイズすることができます。
無効ボタンをスタイリングする他の方法
:hover 擬似クラスを使って、マウスがボタンの上に乗った時にのみスタイルを変更することができます。
<button type="button" disabled>ボタン</button>
<style>
button:disabled:hover {
background-color: #ddd;
}
</style>
::before 擬似要素を使って、ボタンの前にコンテンツを追加することができます。
<button type="button" disabled>ボタン</button>
<style>
button:disabled::before {
content: "無効";
color: #666;
margin-right: 10px;
}
</style>
aria-disabled 属性を使って、ボタンがクリックできないことをユーザーに伝えることができます。
<button type="button" aria-disabled="true">ボタン</button>
- シンプルなスタイル変更であれば、
:disabled擬似クラスを使うのがおすすめです。 - マウスオーバー時のスタイル変更もしたい場合は、
:hover擬似クラスと組み合わせて使います。 - ボタンの前にコンテンツを追加したい場合は、
::before擬似要素を使います。 - アクセシビリティを考慮する場合は、
aria-disabled属性も併用します。
css
