[解決済み] 無効化されたボタンをCSSでスタイル表示する

質問

以下のFiddleにあるような、画像を埋め込んだボタンのスタイルを変更しようとしています。

http://jsfiddle.net/krishnathota/xzBaZ/1/

例では画像はありませんね。

しているのですが

1. を変更します。 background-color ボタンが無効の場合
2. ボタンが無効のときにボタン内の画像を変更する
3. 無効時のホバーエフェクトを無効にする
4. ボタン内の画像をクリックしてドラッグすると、画像が分離して見えることがあるので、それを避けたい
5. ボタン上のテキストが選択できる。それも避けたい。

でやってみました。 button[disabled] . しかし、いくつかの効果を無効にすることができませんでした。 top: 1px; position: relative; と画像を表示します。

解決方法は？

無効化されたボタンには :disabled 擬似クラスです。これは disabled APIを使用します（典型的なフォーム要素）。

CSS2 にのみ対応しているブラウザ/端末では [disabled] セレクタを使用します。

画像と同様に、ボタンに画像を入れないようにしましょう。CSSを使用する background-image と共に background-position と background-repeat . そうすれば、画像のドラッグは発生しません。

選択範囲に問題があります。 具体的な質問に対するリンクはこちらです。

• テキスト選択のハイライトを無効にする方法

disabled セレクタの例です。

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>