CSS を使用してボタンの機能を完全に無効にするにはどうすればよいですか?

ボタンの機能を無効にする CSS

ホバー効果、画像、ドラッグ アンド ドロップ機能を含むボタンを完全に無効にするには, CSS にはいくつかのオプションがあります。

ボタンの外観を変更する場合無効

無効なボタンの外観を変更するには、:disabled 疑似クラスを使用します:

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

画像とホバー効果の削除

画像をボタンとして使用する代わりに、background-position プロパティとbackground-repeat プロパティを持つ CSS の背景画像を使用します。これにより、画像のドラッグが防止されます:

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

ホバー効果を無効にする

button:disabled {
  background-image: ninguno;
  cursor: default;
}

テキスト選択を防止する

テキストを無効にするにはを選択し、次の CSS をbutton:

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

例:

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

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

div {
  padding: 5px 10px;
}

この CSS はボタンの機能を無効にし、視覚的にグレー表示され応答しなくなるようにします。

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