CSS ile stil devre dışı düğmesi

Aşağıdaki Fiddle görüldüğü gibi gömülü bir görüntü ile bir düğmenin stilini değiştirmeye çalışıyorum:

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

Örnekte hiç görüntü yok, korkarım.

Deniyorum:

1. background-colorDevre dışı bırakıldığında düğmeyi değiştirme
2. Devre dışı bırakıldığında düğmedeki görüntüyü değiştirme
3. Devre dışı bırakıldığında fareyle üzerine gelme efektini devre dışı bırakma
4. Düğmedeki görüntüye tıklayıp sürüklediğinizde, görüntü ayrı olarak görülebilir; Bundan kaçınmak istiyorum
5. Düğmedeki metin seçilebilir. Ben de bundan kaçınmak istiyorum.

Yapmayı denedim button[disabled]. Ancak bazı efektler devre dışı bırakılamadı. gibi top: 1px; position: relative;ve görüntü.

Devre dışı bırakılan düğmeler için :disabledsözde öğeyi kullanabilirsiniz. Tüm elemanlar için çalışır.

Yalnızca CSS2'yi destekleyen tarayıcılar / cihazlar için [disabled]seçiciyi kullanabilirsiniz .

Görüntüde olduğu gibi, düğmeye görüntü eklemeyin. CSS kullanma background-imageile background-positionve background-repeat. Bu şekilde, görüntü sürüklemesi gerçekleşmez.

Seçim sorunu: İşte belirli soruya bir bağlantı:

• Metin seçimi vurgulamayı nasıl devre dışı bırakabilirim?

Devre dışı bırakılmış seçici için örnek:

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>

Aşağıdakileri kullanarak devre dışı bırakılmış bir düğmeyi seçebilmeniz gerektiğini düşünüyorum:

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

Sayfanıza aşağıdaki kodu ekleyin. Güven bana, düğme olaylarında hiçbir değişiklik yapılmadı, düğmeyi devre dışı bırakmak / etkinleştirmek için Javascript'te düğme sınıfını ekleyin / kaldırın.

Yöntem 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>

Yöntem 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>

Devre dışı bırakılmış bir düğmeye gri düğme CSS uygulamak için.

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;
}

By CSS:

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

Onları o düğmeye herhangi bir dekorasyon ekleyebilirsiniz. Durumu değiştirmek için jquery kullanabilirsiniz

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

Bootstrap kullanan hepimiz için, "devre dışı" sınıfını ekleyerek ve aşağıdakileri kullanarak stili değiştirebilirsiniz:

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;
}

"Devre dışı" sınıfının eklenmesinin düğmeyi, örneğin bir gönderme formunda devre dışı bırakması gerekmediğini unutmayın. Davranışı devre dışı bırakmak için devre dışı özelliğini kullanın:

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

Burada bazı örneklerle çalışan bir keman var .

Düğmeniz devre dışı bırakıldığında doğrudan opaklığı ayarlar. Öncelikle opaklığını

.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...
}

aşağıdaki çözümü düşünün

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

Ve scss kullanımına geçerseniz:

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

Belows olarak css uygulamanız gerekir:

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