Hướng dẫn css disable button - nút tắt css

• Trang chủ
• Tham khảo
• CSS
• CSS3
• :disabled

Định nghĩa và sử dụng

• ":disabled" chọn thành phần bị vô hiệu hóa (disabled), thường sử dụng cho các thành phần của form.bị vô hiệu hóa (disabled), thường sử dụng cho các thành phần của form.

Cấu trúc

:disabled {
    property: value; 
}

Ví dụ

HTML viết:

Hiển thị trình duyệt khi chưa có CSS:

CSS viết:

input:disabled{
    background: #ccc;
}

Hiển thị trình duyệt khi đã có css:

Ta thấy những thành phần đang kích hoạt (disabled) đã được chọn.

Trình duyệt hỗ trợ

":disabled" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.

Tôi đang cố gắng thay đổi kiểu của một nút với hình ảnh được nhúng như đã thấy 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
   9 của nút khi nó bị tắt
2. Thay đổi hình ảnh trong nút khi nó bị tắt
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; 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

input:disabled{
    background: #ccc;
}

0. Nhưng một số hiệu ứng không thể bị vô hiệu hóa. như

input:disabled{
    background: #ccc;
}

1 và hình ảnh.

Teylyn

33,8K4 Huy hiệu vàng51 Huy hiệu bạc70 Huy hiệu Đồng4 gold badges51 silver badges70 bronze badges

Đã hỏi ngày 7 tháng 2 năm 2013 lúc 11:31Feb 7, 2013 at 11:31

Krishna Thotakrishna ThotaKrishna Thota

6.23012 Huy hiệu vàng53 Huy hiệu bạc79 Huy hiệu đồng12 gold badges53 silver badges79 bronze badges

Đối với các nút bị vô hiệu hóa, bạn có thể sử dụng lớp giả

input:disabled{
    background: #ccc;
}

2. Nó hoạt động cho tất cả các yếu tố có API

input:disabled{
    background: #ccc;
}

3 (thường là các yếu tố mẫu).

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

input:disabled{
    background: #ccc;
}

4.

Như với hình ảnh, đừng đặt một hình ảnh vào nút. Sử dụng CSS

input:disabled{
    background: #ccc;
}

5 với

input:disabled{
    background: #ccc;
}

6 và

input:disabled{
    background: #ccc;
}

7. 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ể: here is a link to the specific question:

• Cách tắt lựa chọn văn bản làm nổi bật

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

   This is a working button 



   This is a disabled button 

Connexo

51.7K13 Huy hiệu vàng82 Huy hiệu bạc117 Huy hiệu đồng13 gold badges82 silver badges117 bronze badges

Đã trả lời ngày 7 tháng 2 năm 2013 lúc 11:47Feb 7, 2013 at 11:47

5

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

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

Đã trả lời ngày 7 tháng 2 năm 2013 lúc 11:41Feb 7, 2013 at 11:41

Billy Moatbilly MoatBilly Moat

20,5K7 Huy hiệu vàng44 Huy hiệu bạc37 Huy hiệu đồng7 gold badges44 silver badges37 bronze badges

2

Thêm mã dưới đây trong trang của bạn. Không có thay đổi nào được thực hiện cho các sự kiện nút, để vô hiệu hóa/bật nút chỉ cần thêm/xóa lớp nút trong JavaScript.

Phương pháp 1

Phương pháp 2

Đã trả lời ngày 23 tháng 12 năm 2014 lúc 14:20Dec 23, 2014 at 14:20

2

Bởi CSS:CSS:

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

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

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

Đã trả lời ngày 13 tháng 11 năm 2017 lúc 15:33Nov 13, 2017 at 15:33

Alvar ChonalvargonAlvargon

3062 Huy hiệu bạc9 Huy hiệu Đồng2 silver badges9 bronze badges

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

0

Đã trả lời ngày 2 tháng 6 năm 2015 lúc 10:10Jun 2, 2015 at 10:10

Ngrashiangrashiangrashia

9.7995 huy hiệu vàng42 Huy hiệu bạc58 Huy hiệu đồng5 gold badges42 silver badges58 bronze badges

Đối với tất cả chúng tôi bằng cách 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 các mục sau:

HTML

1

CSS

2

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ụ trong 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:

3

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

Đã trả lời ngày 24 tháng 9 năm 2017 lúc 11:50Sep 24, 2017 at 11:50

c-chavezc-chavezc-chavez

6.9415 huy hiệu vàng31 Huy hiệu bạc48 Huy hiệu đồng5 gold badges31 silver badges48 bronze badges

Xem xét các giải pháp sau

4

Đã trả lời ngày 9 tháng 10 năm 2019 lúc 7:25Oct 9, 2019 at 7:25

Sahil Ralkarsahil RalkarSahil Ralkar

2.18321 Huy hiệu bạc23 Huy hiệu đồng21 silver badges23 bronze badges

2

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

5

Punit Gajjar

4.6607 Huy hiệu vàng32 Huy hiệu bạc64 Huy hiệu Đồng7 gold badges32 silver badges64 bronze badges

Đã trả lời ngày 30 tháng 5 năm 2017 lúc 4:44May 30, 2017 at 4:44

Kushal Baldevkushal Baldevkushal Baldev

6691 Huy hiệu vàng11 Huy hiệu bạc32 Huy hiệu đồng1 gold badge11 silver badges32 bronze badges

Cần áp dụng CSS như tin tưởng:

6

Đã trả lời ngày 2 tháng 8 năm 2019 lúc 6:36Aug 2, 2019 at 6:36

7

Qiu

5.51110 Huy hiệu vàng49 Huy hiệu bạc56 Huy hiệu Đồng10 gold badges49 silver badges56 bronze badges

Đã trả lời ngày 20 tháng 9 năm 2014 lúc 6:06Sep 20, 2014 at 6:06

Và nếu bạn thay đổi tệp kiểu (.css) của mình thành SASS (.SCSS), hãy sử dụng:

8

Đã trả lời ngày 3 tháng 4 năm 2019 lúc 12:23Apr 3, 2019 at 12:23

AkosthaakosthaAkostha

5946 Huy hiệu bạc8 Huy hiệu Đồng6 silver badges8 bronze badges