có thể đặt hình ảnh vào loại đầu vào = "hộp kiểm" không?

Question

tôi muốn đặt một hình ảnh trên nền của hộp kiểm tra & hộp radio trong mã html của tôi nhưng nó không hoạt động nhưng nó hoạt động trên thuộc tính biểu mẫu khác.

Answer 1

tôi thấy cách làm thế nào cho hình ảnh để hộp kiểm & đài phát thanh nút với css tinh khiết.

HTML

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"></label> 

CSS

input[type=checkbox] { 
    display:none; 
} 

input[type=checkbox] + label { 
    background: #999; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

input[type=checkbox]:checked + label { 
    background: #0080FF; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

Kiểm tra này để biết thêm http://css-tricks.com/the-checkbox-hack/,

https://gist.github.com/592332

Answer 2

Đặt hộp kiểm trong div và đặt hình nền trong div đã cho. Dưới đây là một ví dụ:

<div id="backgrounddiv" style="background-image: url('image.gif');"> 
<input id="check_box" type="checkbox" /> 
</div> 

Answer 3

Tôi viết mã của riêng mình để khắc phục vấn đề này. Điều này sẽ làm việc như thế này. Tôi không có mã này ngay bây giờ nhưng tôi viết cùng một cách ở đây trên SO.

<div class="checkbox-wrapper"> 
<input type="checkbox" name="value"/> 
<img src="img/blah.png"/> 
</div> 

Trong css, chúng tôi sẽ ẩn hộp kiểm này bằng cách làm cho chỉ mục Z thấp hơn hình ảnh tôi đặt bên trong mã trình bao này. Cuối cùng, khi ai đó nhấp vào hình ảnh, nó trông giống như hộp kiểm và trong hộp kiểm thực sẽ được nhấp vào. thay vì display:none sử dụng opacity: 0 sẽ tốt hơn. Điều này sẽ phá vỡ trong IE6 nhưng chúng tôi đã không quan tâm về điều đó bởi vì tôi không hỗ trợ IE6 nữa.

Trong Javascript Bạn có thể viết sự kiện nếu bạn muốn triển khai khác (nhưng tương tự như tôi). Bạn có thể thay thế Checkbox Html bản địa, Radio và chọn (select2 là tốt hơn nếu bạn gắn bó với Twitter bootstrap) với các điều khiển dựa trên chủ đề của riêng bạn.