Question

我最近一直在为一个大项目做主题，我正在使用icheck.js来设置我的复选框样式，直到我意识到它对触摸的反应有多慢。

我意识到要走的路是css样式，但是从我看到的情况来看，复选框需要关闭或者在标签内部。

每个复选框的标签都有不同的宽度和/或高度，复选框需要向右浮动，因此彼此之间有一些可变的距离。

任何想法，或任何在触摸设备中超快速运行的脚本？

Answer 1

你可以用HTML / CSS和一些JS来做，但它有点棘手，而且不是很干净。首先，您需要将复选框与其他HTML元素（div或其他）包装在一起，并隐藏复选框元素（display：none）。

然后，将包装器元素设计为适合您的自定义复选框，具有未选中状态（作为默认值）和选中状态（使用类）。

最后，使用一些JS来管理对包装元素的点击。使用jQuery工作小提琴（因为我很懒）：

$('.wrapperCheckbox').click(function () {
var checkbox = $(this).find('input[type="checkbox"]');
var checked;
$(this).toggleClass('checked');
if(checkbox.is(':checked')){
    checked = false;
}
else {
    checked = true;
}

checkbox.attr('checked', checked);        

});

http://jsfiddle.net/49Xg2/2/

正如你所看到的，它只是将包装器插入其子复选框，它肯定比使用lib更轻。请注意，我没有测试它，所以它可能是错误的，但它会告诉你如何操作。

我知道您不想使用JS，但只有HTML / CSS 100％在所有主流浏览器上运行才能获得结果。

Answer 2

同样没有使用标签的java脚本。

    input[type=checkbox] {
    display: none;
}
.wrapperCheckbox {
    width: 2em;
    height: 2em;
    background: red;
    display:block;
}
input[type=checkbox]:checked + label{

    background: blue;

}

http://jsfiddle.net/49Xg2/7/

css只有造型复选框和单选按钮

2 个答案: