Anu*_*ith 16
喜欢这个有点jQuery和css:DEMO
<div class="checkbox">
</div>
.checkbox{
width: 23px;
height: 21px;
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked{
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}
$(".checkbox").click(function(){
$(this).toggleClass('checked')
});
asi*_*haq 10
正如其他人所说,你可以使用代理元素(div)并在单击div时更改复选框状态选中/取消选中.以下是您需要的工作示例:(我使用了简单的javascript,以便读者可以快速理解)
分步指南:
1)首先创建两个用于检查状态的css类和一个用于未检查状态的css类:
.image-checkbox {
background:url(unchecked.png);
width:30px;
height:30px;
}
.image-checkbox-checked {
background:url(checked.png);
width:30px;
height:30px;
}
2)为DIV和Checkbox创建HTML.我们的想法是,对于每个复选框(输入类型=复选框),我们将有一个div.div的id将以单词proxy为后缀,以便我们识别它.此外,对于每个代理div,我们将分配初始类.image-checkbox.假设我们创建了两个复选框:
<div id="checkbox1_proxy" class="image-checkbox" />
<div id="checkbox2_proxy" class="image-checkbox" />
Originl复选框(用样式属性隐藏它[visibility:hidden])
<input id="checkbox1" name="checkbox1" type="checkbox" />
<input id="checkbox2" name="checkbox2" type="checkbox" />
3)现在我们需要一些javascript代码来设置复选框,以便在单击代理元素(DIV)时选中/取消选中.我们还需要根据复选框的当前状态更改Proxy div的背景图像.我们可以调用一个函数来在加载文档时附加事件处理程序:
<body onload="load()">
<script type="text/javascript">
function load() {
var all_checkbox_divs = document.getElementsByClassName("image-checkbox");
for (var i=0;i<all_checkbox_divs.length;i++) {
all_checkbox_divs[i].onclick = function (e) {
var div_id = this.id;
var checkbox_id =div_id.split("_")[0];
var checkbox_element = document.getElementById(checkbox_id);
if (checkbox_element.checked == true) {
checkbox_element.checked = false;
this.setAttribute("class","image-checkbox");
} else {
checkbox_element.checked = true;
this.setAttribute("class","image-checkbox-checked");
}
};
}
}
</script>
多数民众赞成......我希望它有所帮助
谷歌搜索时有人磕磕绊绊？考虑这种仅限CSS的方法:
input[type=checkbox] {
display: block;
width: 30px;
height: 30px;
-webkit-appearance: none;
outline: 0;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
input[type=checkbox]:not(:checked) {
background-image: url(unchecked.svg);
}
input[type=checkbox]:checked {
background-image: url(checked.svg);
}
看这个例子:
input[type=checkbox] {
display: block;
width: 30px;
height: 30px;
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
-webkit-appearance: none;
outline: 0;
}
input[type=checkbox]:checked {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><path id="checkbox-3-icon" fill="#000" d="M81,81v350h350V81H81z M227.383,345.013l-81.476-81.498l34.69-34.697l46.783,46.794l108.007-108.005 l34.706,34.684L227.383,345.013z"/></svg>');
}
input[type=checkbox]:not(:checked) {
background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"> <path id="checkbox-9-icon" d="M391,121v270H121V121H391z M431,81H81v350h350V81z"></path> </svg>');
}<input type="checkbox" id="check" />
<div></div>