css - CSSでスタイル無効ボタン

Question

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

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

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

私がしようとしていること：

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

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

score 490 · Accepted Answer

無効になっているボタンには、:disabled疑似クラスを使用できます。disabledAPIを持つすべての要素（通常はフォーム要素）で機能します。

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

画像と同様に、ボタンに画像を入れないでください。とでCSSbackground-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>

score 102 · Accepted Answer

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

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

score 40 · Accepted Answer

以下のコードをページに追加します。ボタンイベントに変更は加えられていません。ボタンを無効/有効にするには、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>

score 11 · Accepted Answer

無効になっているボタンに灰色のボタン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;
}

score 11 · Accepted Answer

CSSによる：

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

それらは、そのボタンに任意の装飾を追加できます。ステータスを変更するには、jqueryを使用できます

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

score 7 · Accepted Answer

ブートストラップを使用している私たち全員にとって、「disabled」クラスを追加し、以下を使用してスタイルを変更できます。

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」クラスを追加しても、たとえば送信フォームでボタンが無効になるとは限らないことに注意してください。その動作を無効にするには、disabledプロパティを使用します。

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

いくつかの例を含む実用的なフィドルは、こちらから入手できます。

score 5 · Accepted Answer

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

.v-button{
    opacity:1;    
}

score 5 · Accepted Answer

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

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

score 4 · Accepted Answer

以下のようにcssを適用する必要があります：

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

また、スタイル（.css）ファイルをSASS（.scss）に変更する場合は、次を使用します。

button {
  background-color: #007700;
  &:disabled {
    background-color: #cccccc;
  }
}

css - CSSでスタイル無効ボタン

11 に答える 11

Related

Reference