css ONLY样式复选框和单选按钮

Question

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

我意识到要走的路是 css 样式，但是据我所见，复选框需要靠近标签或位于标签内。

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

有什么想法或任何类型的脚本可以在触摸设备上运行得超快吗？

Answer 1

您可以使用 HTML/CSS 和一些 JS 来完成，但这有点棘手，而且不是很干净。 首先，您需要用另一个 HTML 元素(div 或其他)包裹您的复选框并隐藏您的复选框元素(显示:无)。

然后，风格化包装元素以适应您的自定义复选框，具有未选中状态(默认)和选中状态(使用类)。

最后，使用一些 JS 来管理对包装器元素的点击。使用 jQuery 工作 fiddle (因为我很懒):

$('.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/

如您所见，它只是将包装器插入到它的子复选框中，而且它肯定比为此使用库更轻。请注意，我没有测试它，所以它可能是错误的，但它向您展示了如何去做。

我知道你不想使用 JS，但你不能只使用 HTML/CSS 100% 在所有主流浏览器上工作的结果。