Thay đổi hình ảnh kiểm tra hộp kiểm thành hình ảnh tùy chỉnh

Question

Tôi đang cố thay đổi 'hình ảnh hộp' mặc định của hộp kiểm bằng css, nhưng nó không hoạt động. Có cách nào arround này?

<input type="checkbox" class="class_checkbox"> 

Và trong tập tin lớp tôi làm

.class_checkbox{ 
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;  
} 

Answer 1

Hãy thử:

<input type="checkbox" class="input_class_checkbox"> 

jQuery

$('.input_class_checkbox').each(function(){ 
    $(this).hide().after('<div class="class_checkbox" />'); 

}); 

$('.class_checkbox').on('click',function(){ 
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked')) 
}); 

Fiddle: http://jsfiddle.net/cn6kn/

Answer 2

Bạn có thể sử dụng css tinh khiết, chỉ cần thêm một nhãn hộp kiểm như thế này:

.check_box { 
    display:none; 
} 

.check_box + label{ 
    background:url('images/check-box.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

.check_box:checked + label{ 
    background:url('images/check-box-checked.png') no-repeat; 
    height: 16px; 
    width: 16px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

Answer 3

Tôi tạo ra một Fiddle sử dụng CSS tinh khiết. Câu trả lời được bỏ phiếu nhiều nhất không xử lý các sự kiện nhấp chuột và sẽ không hoạt động tốt, bởi vì giá trị hộp kiểm sẽ không thay đổi.

Đây là ví dụ của tôi:

http://jsfiddle.net/kEHGN/1/

Về cơ bản, chúng ta cần html sau:

<div class="checkbox_wrapper"> 
    <input type="checkbox" /> 
    <label></label> 
</div> 

Và CSS sau đây:

.checkbox_wrapper{ 
    position: relative; 
    height: 16px; 
    width: 17px; 
} 

input[type="checkbox"] { 
    opacity:0; 
    height: 16px; 
    width: 17px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 2; 
} 

input[type="checkbox"] + label{ 
    background:url('../images/unchecked.png') no-repeat; 
    height: 16px; 
    width: 17px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
} 

input[type="checkbox"]:checked + label{ 
    background:url('../images/checked.png') no-repeat; 
    height: 16px; 
    width: 17px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

Chỉ cần kiểm tra đường bay của hình ảnh và chiều rộng và chiều cao phải bằng với chiều rộng a chiều cao thứ hai của hình ảnh. Trên fiddler tôi đang sử dụng hình ảnh được mã hóa base64.

Tôi hy vọng nó có thể hữu ích.

Answer 4

Đây là cách CSS tinh khiết để thay đổi kiểu hộp kiểm của bạn. Tôi thấy nó thực sự hữu ích, vì tôi đã có các chức năng khác liên quan đến các hộp kiểm tương tự.

http://www.jotform.org/html-elements/css-checkbox-background-color/

BR của

Answer 5

lẽ sẽ hữu ích mẫu của tôi với LESS.

<div class="custom-checkbox"> 
    <input component="input" type="checkbox"/> 
    <label>Here is caption right to checkbox</label> 
</div> 

    @imgsize: 25px; 
    .custom-checkbox{ 
     position: relative; 

     > input[type="checkbox"] { 

     display:none; 
     position: absolute; 
     top: 0; 
     left: 0; 

      + label{ 

       background:url('../img/unchecked.png') no-repeat 0 0; 
       background-size:@imgsize; 
       height: @imgsize; 
       padding: 4px 0 5px 35px; 
       display: inline-block; 
       -webkit-transition-duration: 0.3s; 
       -moz-transition-duration: 0.3s; 
       transition-duration: 0.3s;   
      } 
     } 
     > input[type="checkbox"]:checked + label{ 

      background:url('../img/checked.png') no-repeat; 
      background-size:@imgsize @imgsize; 
     } 
    } 

Answer 6

Tôi tìm thấy một cách khác, không sử dụng nhãn lân cận hoặc div xung quanh.

Cơ sở dữ liệu của tôi là tôi đã có trình phân tích cú pháp markdown tạo các danh sách TODO tiện lợi đó và tôi muốn tạo kiểu cho chúng.Thay đổi HTML được tạo không phải là một lựa chọn, vì vậy tôi đã đưa ra giải pháp này:

được đưa ra một hộp kiểm như thế này:

<input type="checkbox" id="cb"> 

Bạn có thể tạo kiểu với visibility: hidden vào hộp kiểm và visibility: visible trên :: sau, như thế này:

#cb { 
 
    visibility: hidden; 
 
} 
 

 
input#cb::after { 
 
    visibility: visible; 
 
    content: "F"; 
 
    color: red; 
 
    background: green; 
 
    padding: 8px; 
 
} 
 

 
input#cb:checked::after { 
 
    content: " T "; 
 
    color: green; 
 
    background: red; 
 
}

<!doctype html> 
 
<html> 
 

 
<body> 
 
    <input type="checkbox" id="cb"> 
 
</body> 
 

 
</html>

hộp kiểm hoạt động giống như bình thường một và bạn có thể tạo kiểu cho nó theo ý bạn.

Có lẽ nó sẽ giúp someody (và tôi có thể đánh dấu nó, bởi vì tôi đã không tìm thấy bất cứ điều gì như thế này trên web)