CSS を使用して無効なボタンを効果的にスタイル設定するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS を使用して無効なボタンを効果的にスタイル設定するにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-10 11:51:13

オリジナル

687 人が閲覧しました

How Can I Effectively Style Disabled Buttons with CSS?

CSS を使用した無効なボタンのスタイル設定

背景

ボタンが無効になっている場合、これは必須ですそれをユーザーに視覚的に示します。これにより、混乱や予期せぬインタラクションを防ぐことができます。

解決策

CSS で無効なボタンのスタイルを効果的に設定するには、次の点を考慮してください。

1.色と背景:

無効なボタンの外観を変更するには、:disabled 疑似クラスを使用します。この疑似クラスは、無効な属性を持つ要素、またはプログラムによって無効にされた要素に適用されます。例:

button:disabled {
  background-color: #cccccc;
  border: 1px solid #999999;
}

ログイン後にコピー

2.画像と背景画像:

を使用する代わりに、ボタンの画像の要素には、CSS のbackground-image プロパティを使用します。これにより、画像をボタンの外にドラッグするという問題がなくなりました。

button {
  background-image: url("disabled-image.png");
  background-repeat: no-repeat;
  background-position: center;
}

ログイン後にコピー

3.ホバー効果:

無効なボタンのホバー効果を無効にするには、次のルールを適用します:

button:disabled {
  cursor: default;
  pointer-events: none;
}

ログイン後にコピー

4.テキスト選択:

無効なボタンでテキストが選択されないようにするには、次のプロパティを使用します:

button:disabled {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ログイン後にコピー

5。例:

これらのルールを組み合わせると、次のような完全に無効化されたボタンを作成できます:

button:disabled {
  background-color: #cccccc;
  border: 1px solid #999999;
  cursor: default;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

ログイン後にコピー

以上がCSS を使用して無効なボタンを効果的にスタイル設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。