Giải pháp HTML / CSS ngữ nghĩa thuần túy
Điều này là dễ dàng để tự thực hiện, không cần giải pháp làm sẵn. Ngoài ra, nó sẽ dạy cho bạn rất nhiều vì bạn dường như không quá dễ dàng với CSS.
Đây là những gì bạn cần làm:
Các hộp kiểm của bạn cần phải có các idthuộc tính riêng biệt . Điều này cho phép bạn kết nối <label>với nó, bằng cách sử dụng phân phối của nhãn for.
Thí dụ:
<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="http://someurl" /></label>
Gắn nhãn vào hộp kiểm sẽ kích hoạt hành vi của trình duyệt: Bất cứ khi nào ai đó nhấp vào nhãn (hoặc hình ảnh bên trong nhãn), hộp kiểm sẽ được bật.
Tiếp theo, bạn ẩn hộp kiểm bằng cách áp dụng ví dụ display: none;cho nó.
Bây giờ, tất cả những gì còn lại phải làm là đặt kiểu bạn muốn cho label::beforephần tử giả (sẽ được sử dụng làm phần tử thay thế hộp kiểm trực quan):
label::before {
background-image: url(../path/to/unchecked.png);
}
Trong bước khó khăn cuối cùng, bạn sử dụng :checkedbộ chọn giả CSS để thay đổi hình ảnh khi hộp kiểm được chọn:
:checked + label::before {
background-image: url(../path/to/checked.png);
}
Các +( liền kề anh chị em chọn ) đảm bảo bạn chỉ thay đổi nhãn trực tiếp theo các hộp kiểm ẩn trong đánh dấu.
Bạn có thể tối ưu hóa điều đó bằng cách đặt cả hai hình ảnh vào một spritemap và chỉ áp dụng thay đổi background-positionthay vì hoán đổi hình ảnh.
Tất nhiên bạn cần định vị nhãn chính xác và áp dụng display: block;và đặt chính xác widthvà height.
Biên tập:
Ví dụ và đoạn mã, mà tôi đã tạo sau các hướng dẫn này, sử dụng cùng một kỹ thuật, nhưng thay vì sử dụng hình ảnh cho các hộp kiểm, việc thay thế hộp kiểm được thực hiện hoàn toàn bằng CSS , tạo ::beforenhãn trên nhãn, sau khi được chọn, đã được kiểm tra content: "✓";. Thêm một số đường viền tròn và chuyển tiếp ngọt ngào và kết quả là thực sự thích!
Dưới đây là một codepen hoạt động thể hiện kỹ thuật và không yêu cầu hình ảnh cho hộp kiểm:
http://codepen.io/anon/pen/wadwpx
Đây là cùng một mã trong một đoạn:
ul {
list-style-type: none;
}
li {
display: inline-block;
}
input[type="checkbox"][id^="cb"] {
display: none;
}
label {
border: 1px solid #fff;
padding: 10px;
display: block;
position: relative;
margin: 10px;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label::before {
background-color: white;
color: white;
content: " ";
display: block;
border-radius: 50%;
border: 1px solid grey;
position: absolute;
top: -5px;
left: -5px;
width: 25px;
height: 25px;
text-align: center;
line-height: 28px;
transition-duration: 0.4s;
transform: scale(0);
}
label img {
height: 100px;
width: 100px;
transition-duration: 0.2s;
transform-origin: 50% 50%;
}
:checked+label {
border-color: #ddd;
}
:checked+label::before {
content: "✓";
background-color: grey;
transform: scale(1);
}
:checked+label img {
transform: scale(0.9);
box-shadow: 0 0 5px #333;
z-index: -1;
}
<ul>
<li><input type="checkbox" id="cb1" />
<label for="cb1"><img src="https://picsum.photos/seed/1/100" /></label>
</li>
<li><input type="checkbox" id="cb2" />
<label for="cb2"><img src="https://picsum.photos/seed/2/100" /></label>
</li>
<li><input type="checkbox" id="cb3" />
<label for="cb3"><img src="https://picsum.photos/seed/3/100" /></label>
</li>
<li><input type="checkbox" id="cb4" />
<label for="cb4"><img src="https://picsum.photos/seed/4/100" /></label>
</li>
</ul>
