☰

CSSで無効ボタンのスタイルを設定する 質問する

tag-icon • tag-icon css
CSSで無効ボタンのスタイルを設定する 質問する

次の Fiddle に示すように、画像が埋め込まれたボタンのスタイルを変更しようとしています。

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

残念ながら、この例には画像がありません。

私がやろうとしていること:

  1. background-colorボタンが無効になっている場合の を変更する
  2. ボタンが無効になっているときにボタン内の画像を変更する
  3. 無効になっている場合はホバー効果を無効にする
  4. ボタン内の画像をクリックしてドラッグすると、画像が別々に表示されるので、それを避けたい
  5. ボタン上のテキストは選択できます。これも避けたいです。

でやってみましたbutton[disabled]。しかし、一部のエフェクトは無効にできませんでした。 やtop: 1px; position: relative;画像など。

ベストアンサー1

無効なボタンには:disabled疑似クラスを使用できます。これは、API を持つすべての要素disabled(通常はフォーム要素) で機能します。

CSS2 のみをサポートするブラウザ/デバイスの場合は、セレクターを使用できます[disabled]。

画像と同様に、ボタンに画像を入れないでください。とbackground-imageを使用した CSS を使用します。そうすれば、画像のドラッグは発生しません。background-positionbackground-repeat

選択問題:具体的な質問へのリンクは次のとおりです:

無効なセレクターの例:

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>

おすすめ記事