次のFiddleで見られるように、画像が埋め込まれたボタンのスタイルを変更しようとしています。
この例では、画像はありません。
しようとしています。
1.ボタンが無効になっているときに,ボタンの background-color
を変更する。
2.ボタンが無効になっているときに、ボタン内の画像を変更する
3.無効にしたとき、ホバー効果を無効にする
4.ボタン内の画像をクリックしてドラッグすると、画像が分離して見えてしまうので、それを回避したい
5.ボタンのテキストが選択できる。それも避けたい。
button[disabled]でやってみました。しかし、いくつかの効果は無効化できませんでした。
top:1px; position: relative;` や image.
無効化されたボタンには、:disabled
疑似要素を使うことができます。これはすべての要素で機能します。
CSS2のみをサポートするブラウザ/デバイスでは、[disabled]
セレクタを使用できます。
画像と同様に、ボタンに画像を入れてはいけません'。CSSの background-image
に background-position
と background-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>