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

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

この質問では、ユーザーは背景色の変更など、無効なボタンの外観を変更する際に困難に直面しました。 、画像、ホバー効果、画像のドラッグとテキストの選択の防止。これらの課題に取り組むために、:disabled 疑似クラスを利用できます。

CSS2 のみに準拠するブラウザの場合は、[disabled] セレクターを使用できます。画像のドラッグを避けるため、ボタン自体の中に画像を配置しないでください。代わりに、CSS の背景画像と背景位置および背景繰り返しを使用します。

テキスト選択の問題を解決するには、次の説明を参照してください。

• 無効にする方法テキスト選択の強調表示

無効なセレクターの実装については、次の例を検討してください。以下:

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,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

これらのガイドラインに従い、提供されたコードを利用することで、Web アプリケーションで無効になっているボタンの外観と動作を適切にカスタマイズできます。

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