CSSでスタイルが無効なボタン

次のフィドルで見られるように、画像が埋め込まれたボタンのスタイルを変更しようとしています：

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

例では画像がありません、私は恐れています。

私はしようとしています：

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

でやってみましたbutton[disabled]。ただし、一部の効果は無効にできませんでした。好き top: 1px; position: relative;でイメージ。

無効なボタンには、:disabled疑似要素を使用できます。すべての要素で機能します。

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

画像と同様に、ボタンに画像を配置しないでください。およびでCSS background-imageを使用します。これにより、画像のドラッグが発生しなくなります。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>

以下を使用して無効なボタンを選択できるはずです。

button[disabled=disabled], button:disabled {
    // your css rules
}

以下のコードをページに追加します。ボタンイベントに変更を加えず、JavaScriptでボタンクラスを追加/削除するだけでボタンを無効/有効にできます。

方法1

 <asp Button ID="btnSave" CssClass="disabledContent" runat="server" />

<style type="text/css">
    .disabledContent 
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }

    .disabledContent > * 
    {
        pointer-events:none;
    }
</style>

方法2

<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />

<style type="text/css">
    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }
</style>

無効なボタンに灰色のボタンCSSを適用します。

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
}

CSS：

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

それらにボタンに装飾を加えることができます。ステータスを変更するには、jqueryを使用できます

$("#id").toggleClass('disable');

ブートストラップを使用しているすべての人にとって、「無効」クラスを追加して以下を使用することにより、スタイルを変更できます。

HTML

<button type="button"class="btn disabled">Text</button>

CSS

.btn:disabled,
.btn.disabled{
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}

「無効」クラスを追加しても、たとえば送信フォームでボタンが必ずしも無効になるわけではないことに注意してください。その動作を無効にするには、disabledプロパティを使用します。

<button type="button"class="btn disabled" disabled="disabled">Text</button>

いくつかの例を含む実用的なフィドルがここにあります。

ボタンを無効にすると、不透明度が直接設定されます。したがって、まず最初に、不透明度を次のように設定する必要があります。

.v-button{
    opacity:1;    
}

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}

次の解決策を検討してください

.disable-button{ 
  pointer-events: none; 
  background-color: #edf1f2;
}

そして、あなたがscssを使うように変更した場合：

button {
  backgroud-color: #007700
  &:disabled {
    backgroud-color: #cccccc
  }
}

belowsとしてcssを適用する必要があります：

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }