Làm cách nào để đặt CSS cho các hộp kiểm bị tắt?

Question

Tôi muốn thay đổi CSS cho các hộp kiểm bị vô hiệu hóa trong một mạng lưới (chúng quá khó để xem cho người dùng). Một cách đơn giản để làm điều này là gì?

sở thích của tôi trong công nghệ sử dụng (theo thứ tự giảm dần):
CSS
Javascript
jQuery
khác

Answer 1

Tôi khuyên bạn nên thay đổi màu nền (background-color của biểu mẫu/fieldset) và xem liệu bạn có thể đưa ra độ tương phản tốt hơn không. Nếu bạn chỉ muốn thay đổi màu của các hộp kiểm bị tắt (không thể chọn?), Bạn có thể thử:

input[disabled] { 
... 
/* CSS here */ 
... 
} 

Nhưng nếu chúng bị vô hiệu vì lý do, chắc chắn chúng không cần hiển thị nổi bật? Mục đích cho việc chuyển sang màu xám của họ là, chắc chắn, để tránh nhầm lẫn giữa các thành phần biểu mẫu hoạt động/được kích hoạt và không hoạt động/bị vô hiệu hóa?

Answer 2

Ive có may mắn với một vài thư viện JS để làm việc. Cấp yêu cầu của tôi là làm cho các hộp trông rất khác so với hộp kiểm tiêu chuẩn. Thư viện sau đây thậm chí còn tuân thủ 508.

Styled Form Controls

Answer 3

về cơ bản, bạn cần phải đính kèm sự kiện onclick trên div, p, hay bất kỳ yếu tố khác sử dụng cho một mạng lưới và sau đó chuyển giá trị kiểm tra vào yếu tố tiềm ẩn liên quan đến lĩnh vực mà trong một mạng lưới. đó là rất tầm thường, nếu javascript được sử dụng - hãy kiểm tra jquery để thêm sự kiện onclick vào bất kỳ phần tử nào. nếu được nhấp, hãy đặt giá trị = 1 cho phần tử bị ẩn.

Answer 4

input:disabled {} hoạt động cho mọi trình duyệt ngoại trừ — bạn đã đoán — IE. Đối với IE, tôi đoán bạn sẽ phải sử dụng một số thư viện JS.

Answer 5

Bật hộp kiểm, nhưng sau đó thêm onfocus=this.blur() vào hộp kiểm để không thể nhấp vào hộp kiểm.

Hoặc nếu sử dụng ASP.net (như bạn nói trong bình luận của bạn) giữ cho hộp thiết lập để kích hoạt và thêm dòng sau vào sự kiện Page.Load:

CheckBox1.Attributes.Add("onclick", "return false;"); 

Answer 6

Nếu bạn có một hình thức với một hỗn hợp của các hộp kiểm đã bật và tắt, có các hộp kiểm bị tắt đã bị mờ dần tránh nhầm lẫn cho người dùng. Nếu ý định hiển thị trang chỉ xem có hộp kiểm (ví dụ: để hiển thị tùy chọn sản phẩm được chọn trên biên nhận mua hàng) thì việc thay thế các yếu tố đầu vào hộp kiểm bằng hình ảnh có thể hiển thị kết quả tốt hơn.

Thay

<input type="checkbox" disabled> 
<input type="checkbox" disabled checked> 

với

<img src="unchecked.gif"> 
<img src="checked.gif"> 

Answer 7

Trên thực tế với một chút CSS3 bạn có thể giả lập một giải pháp rất đơn giản. Bạn sẽ luôn phải cân nhắc loại hỗ trợ nào bạn muốn cung cấp. Nhưng nếu bạn làm việc tốt trên các trình duyệt hiện đại, chỉ cần cho nó đi.

Đây là HTML

<label> 
    <input type="checkbox" name="test" /> 
    <span>I accept terms and cons</span><br><br> 
    <button>Great!</button> 
</label> 

Đây là CSS

button { display: none} 
:checked ~ button { 
    font-style: italic; 
    color: green; 
    display: inherit; 
} 

Và đây là DEMO http://jsfiddle.net/DyjmM/