Nút tắt kiểu với CSS

Tôi đang cố gắng thay đổi kiểu nút bằng hình ảnh được nhúng trong Fiddle sau:

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

Trong ví dụ không có hình ảnh, tôi sợ.

Tôi đang cố gắng:

1. Thay đổi background-colornút khi nó bị vô hiệu hóa
2. Thay đổi hình ảnh trong nút khi nó bị vô hiệu hóa
3. Tắt hiệu ứng di chuột khi bị tắt
4. Khi bạn nhấp vào hình ảnh trong nút và kéo nó, hình ảnh có thể được nhìn thấy riêng biệt; Tôi muốn tránh điều đó
5. Văn bản trên nút có thể được chọn. Tôi cũng muốn tránh điều đó.

Tôi đã thử làm trong button[disabled]. Nhưng một số hiệu ứng không thể bị vô hiệu hóa. thích top: 1px; position: relative;và hình ảnh.

Đối với các nút bị vô hiệu hóa, bạn có thể sử dụng :disabledphần tử giả. Nó hoạt động cho tất cả các yếu tố.

Đối với các trình duyệt / thiết bị chỉ hỗ trợ CSS2, bạn có thể sử dụng [disabled]bộ chọn.

Như với hình ảnh, không đặt hình ảnh vào nút. Sử dụng CSS background-imagevới background-positionvà background-repeat. Bằng cách đó, việc kéo hình ảnh sẽ không xảy ra.

Vấn đề lựa chọn: đây là một liên kết đến câu hỏi cụ thể:

• Làm thế nào để tắt đánh dấu lựa chọn văn bản?

Ví dụ cho bộ chọn bị vô hiệu hóa:

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>

Tôi nghĩ bạn sẽ có thể chọn một nút bị vô hiệu hóa bằng cách sử dụng như sau:

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

Thêm mã dưới đây trong trang của bạn. Tin tôi đi, không có thay đổi nào đối với các sự kiện nút, để tắt / bật nút chỉ cần thêm / xóa lớp nút trong Javascript.

Phương pháp 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>

Phương pháp 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>

Để áp dụng CSS nút màu xám cho một nút bị vô hiệu hóa.

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

Bằng CSS:

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

Chúng bạn có thể thêm bất kỳ trang trí cho nút đó. Để thay đổi trạng thái, bạn có thể sử dụng jquery

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

Đối với tất cả chúng ta sử dụng bootstrap, bạn có thể thay đổi kiểu bằng cách thêm lớp "bị vô hiệu hóa" và sử dụng như sau:

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

Hãy nhớ rằng việc thêm lớp "bị vô hiệu hóa" không nhất thiết phải vô hiệu hóa nút, ví dụ như trong một biểu mẫu gửi. Để vô hiệu hóa hành vi của nó, hãy sử dụng thuộc tính bị vô hiệu hóa:

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

Một fiddle làm việc với một số ví dụ có sẵn ở đây .

Khi nút của bạn bị vô hiệu hóa, nó trực tiếp đặt độ mờ. Vì vậy, trước hết chúng ta phải đặt độ mờ đục của nó là

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

xem xét các giải pháp sau đây

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

Và nếu bạn đổi sang scss, hãy sử dụng:

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

Cần áp dụng css như belows:

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