Tôi có thể tạo kiểu cho một điều khiển bị tắt bằng cách sử dụng CSS hoặc tập lệnh không?

Question

Tôi có thành phần HTML div trên trang được cập nhật khi phần tử select trên trang thay đổi. Đôi khi, các thẻ input (hộp văn bản) cần phải được tắt dựa trên lựa chọn.

Đây là vấn đề: các bên liên quan dự án thích chức năng, họ chỉ nghĩ ở trạng thái "bị vô hiệu hóa", nội dung của hộp văn bản quá sáng và do đó không đọc được. Tôi có thể áp dụng CSS cho một điều khiển bị vô hiệu hóa không? Hoặc tôi nên đặt hộp văn bản thành readonly và sử dụng một số CSS khác. Ứng dụng này cũng đang sử dụng jQuery, nếu điều đó có ích. Và ý tưởng hoặc đề xuất ở đây?

Answer 1

Áp dụng CSS cho một phần tử không bị ảnh hưởng bởi việc phần tử đó có bị tắt hay không.

Answer 2

Tôi sẽ đặt chúng thành chỉ đọc, vì dường như bạn muốn mọi người có thể đọc chúng, mọi người cũng có thể muốn chọn văn bản từ họ để sao chép/dán và chọn cũng bị tắt khi hộp văn bản tàn tật. Tuy nhiên, CSS của bạn sẽ hoạt động tốt cho dù phần tử có bị tắt hay không.

Answer 3

Có, bạn có thể. Trong CSS:

input[disabled]{color:green} 

Hoặc jQuery:

$('input[disabled]').css('color','green'); 

UPDATE: Đây chỉ hoạt động trong tắc kè/webkit.

Answer 4

Nếu bạn gặp rắc rối với kiểu không thể ghi đè trong phần tử bị vô hiệu hóa - Giai đoạn trên chỉ ra rằng không có giới hạn về kiểu dáng và suy nghĩ thứ hai, bạn có thể đúng - bạn có thể tốt nhất với việc kiểm soát readonly thuộc tính và "vô hiệu hóa thủ công" bằng cách sử dụng onfocus='this.blur();'

Lưu ý rằng điều này sẽ không hoạt động 100% như một điều khiển bị vô hiệu hóa: Giá trị của nó sẽ được gửi cùng với biểu mẫu.

Answer 5

input[type="submit"][disabled="disabled"] 
{ 
    /* CSS here */ 
} 
input[type="text"][disabled="disabled"] 
{ 
    /* CSS here */ 
} 
input[type="button"][disabled="disabled"] 
{ 
    /* CSS here */ 
} 

trình ở mọi trình duyệt nếu thẻ đầu vào là một cái gì đó như:

<input type="submit" disabled="disabled"> 

và nếu bạn muốn thay đổi nó khi nó không bị vô hiệu hóa, chỉ cần thêm video này vào CSS của bạn

input[type="submit"] 
{ 
    /* CSS here */ 
} 
input[type="text"] 
{ 
    /* CSS here */ 
} 
input[type="button"] 
{ 
    /* CSS here */ 
}