Hình ảnh tùy chỉnh cho hộp kiểm?

Tôi muốn hiển thị hộp kiểm dưới dạng nút chuyển đổi. Nhưng tôi không thể áp dụng hình ảnh tùy chỉnh của tôi cho nó với CCS - vẫn còn hộp kiểm được rút ra. Làm thế nào để accomlish nhiệm vụ này?Hình ảnh tùy chỉnh cho hộp kiểm?

CSS của tôi:

input[type=checkbox]#settingsbutton { 
    border-style: none; 
    background-color: transparent; 
    width: 42px; 
    height: 40px; 
    display: block; 
} 

input[type=checkbox].button-settings { 
    background-image: url("images/button-settings-normal.png"); 
} 

input[type=checkbox].button-settings:active { 
    background-image: url("images/button-settings-normal.png"); 
} 

input[type=checkbox].button-settings:hover { 
    background-image: url("images/button-settings-hover.png"); 
} 

input[type=checkbox].button-settings:active { 
    background-image: url("images/button-settings-pressed.png"); 
}

HTML của tôi:

<body> 

<input type="checkbox" id="settingsbutton" class="button-settings"/> 

</body>

Nguồn

2011-12-29 Dims

Nếu bạn muốn nó bằng dung dịch tinh khiết css sau đó bạn phải thêm label trong đánh dấu của bạn. Đó là một ghi trick & lke này:

input[type=checkbox]{ 
    display:none; 
} 
input[type=checkbox] + label{ 
    height: 40px; 
     width: 42px; 
} 
body:not(#foo) input[type=checkbox]:checked + label{ 
    background-image: url("images/button-settings-normal.png"); 
} 

body:not(#foo) input[type=checkbox] + label{ 
    background-position:0 -46px; /* as per your requirement*/ 
    height: 40px; 
}

HTML

<body> 

<input type="checkbox" id="settingsbutton" class="button-settings"/> 
<label for="settingsbutton"></label> 

</body>

đã đọc những bài viết này:

http://www.thecssninja.com/css/custom-inputs-using-css

http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/

Nhưng nó không làm việc trong IE8 & dưới

Nguồn

2011-12-29 11:58:55 sandeep

Các liên kết được thực sự hữu ích, nhưng tôi không hiểu tại sao bạn sử dụng 'display: none' vào hộp kiểm? Nếu nó không được hiển thị, bạn không thể nhấp vào nó? Liên kết của bạn đề xuất để đặt độ mờ thành 0 để thay thế. – Mikaveli

Bạn có thể nhấp vào nhãn sẽ kích hoạt hộp kiểm – Prodikl

Xem liên kết này để tạo kiểu tóc hộp kiểm: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

Các giải pháp liên quan đến việc trốn vào hộp kiểm và thêm một yếu tố theo kiểu ở vị trí của nó, mà giả lập Trả phòng hành vi của hộp.

Nguồn

2011-12-29 12:01:59 techfoobar

Có thấy văn bản này, nhưng tự hỏi liệu có thể sử dụng CSS không – Dims

Hãy thử giải pháp này nếu bạn có một số văn bản trong nhãn

input[type=checkbox]{ 
    display:none; 
} 
input[type=checkbox] + label:before{ 
    height: 42px; 
    width: 42px; 
    content: url("../img/chk.jpg"); 
} 
body input[type=checkbox]:checked + label:before{ 
    content: url("../img/chk_checked.jpg"); 
}

Nguồn

2016-10-27 10:22:47

Hình ảnh tùy chỉnh cho hộp kiểm?

Trả lời

Các vấn đề liên quan