jquery - 使用 jQuery 扩展复选框周围的可点击区域

Question

我正在设计一个使用浏览器提供的标准复选框的任务列表。但恕我直言，复选框区域太小且难以单击，特别是当您对多个复选框进行半高级用户样式单击时(对于不知道键盘快捷键但想要进行大量归档、删除等操作的用户) .一次)。

有什么方法可以使复选框周围的区域可点击，例如在其周围额外添加 5 像素的填充吗？我使用 jQuery 作为我的主要客户端代码，不过我并不反对使用普通的旧 JS(如果它更有意义的话)。

哦，我并不是真的在寻找插件。这里需要一些轻量级的东西。

提前干杯!

Answer 1

自 2016 年起可在 Chrome 中使用:

<style>
.cb{
    position: relative;
    margin:0;
}
.cb:before {
    content:'';
    position: absolute;
    top:-10px;
    bottom:-10px;
    left:-10px;
    right:-10px;
}
</style>

<input type="checkbox" class="cb" />