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

CSS を使用した無効なボタンのスタイルのカスタマイズ

アクセシビリティ対応の Web ページを作成する場合、要素が無効になっているときに適切にスタイル設定されていることを確認することが重要です。この記事では、CSS を使用して無効にしたボタンの外観をカスタマイズするさまざまな側面について説明します。

ボタンのプロパティの変更

無効になっているときにボタンの背景色と画像を変更するには、次のコマンドを使用します。無効化された疑似クラス:

button:disabled {
  background-color: #cccccc;
  background-image: url('disabled-image.png');
}

ホバーの無効化効果

無効なボタンがホバー アクションに反応しないようにするには、ホバー固有のスタイルを削除します。

button:disabled:hover {
  background-color: #cccccc;
}

画像のドラッグの防止

画像をボタンとして使用することは避けてください。代わりに、CSS の背景画像と背景位置および背景繰り返しを使用します。

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

テキスト選択の無効化

ボタン内のテキスト選択を禁止するには、次のコードを適用します。スタイル:

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

ブラウザ互換性

CSS2 のみをサポートするブラウザの場合は、:disabled の代わりに [disabled] セレクターを使用します。

例

次の例を考えてみましょう。 :

<button>Working Button</button>
<button disabled>Disabled Button</button>

button {
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
}

button:disabled {
  background-color: #ccc;
  color: #888;
}

このコード2 つのボタンをレンダリングします。1 つは青い枠線と白いテキストで機能し、もう 1 つは灰色の背景と淡色のテキストで無効になります。無効化されたボタンの画像にはカスタム画像が表示され、そのホバー効果は無効になります。

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