Html 用CSS隐藏复选框

我不熟悉html和css，我正在从事一个项目，我想使用自定义复选框。 我试图通过css隐藏带有图像的复选框。如果不需要的话，我不想重新编写html。我用（display:none；）使我的图像覆盖复选框，但这也禁用了我的复选框。有没有办法使我的复选框在不显示的情况下可用

    input[type='checkbox'] 
    {
    display: none;
    }

    input[type='checkbox'] + label
    {
    background: url('/Pictures/checkbox_unchecked.jpg')no-repeat;
    height: 30px;
    width: 30px;
    background-size: 100%;
    display:inline-block;
    padding: 0 0 0 0px;
    }

    input[type='checkbox']:checked + label
    {
    background: url('Pictures/checkbox_checked.jpg') no-repeat;
    height: 50px;
    width: 200px;
    background-size: 100%;
    display:inline-block;
    padding: 0 0 0 0px;
    }

---

您可以将复选框的不透明度设置为0。这仍然使它可以点击

示例（在黑色矩形内单击）：

#复选框{
不透明度：0；
}
#容器{
边框：2件纯黑；
宽度：20px；；
}

---

您可以将复选框的不透明度设置为0。这仍然使它可以点击

示例（在黑色矩形内单击）：

#复选框{
不透明度：0；
}
#容器{
边框：2件纯黑；
宽度：20px；；
}

标签输入{
不透明度：0；
宽度：0；
身高：0；
溢出：隐藏；
保证金：0；
填充：0；
}
标签跨度y{
显示：无；
}
标签span.n{
显示：内联；
}
标签输入：选中~span.y{
显示：内联；
}
标签输入：选中~span.n{
显示：无；
}

选中的！
点击我！

标签输入{
不透明度：0；
宽度：0；
身高：0；
溢出：隐藏；
保证金：0；
填充：0；
}
标签span.y{
显示：无；
}
标签span.n{
显示：内联；
}
标签输入：选中~span.y{
显示：内联；
}
标签输入：选中~span.n{
显示：无；
}

选中的！
点击我！

input[type='checkbox']{
显示：块；
身高：0；
宽度：0；
不透明度：0；
溢出：隐藏；
}
输入[type='checkbox']+标签{
背景：url（'http://lorempixel.com/30/30/")不重复;；
高度：30px；
宽度：30px；
背景尺寸：封面；
显示：内联块；
}
输入[type='checkbox']：选中+标签{
背景：url（'http://lorempixel.com/50/200/")不重复;；
高度：50px；
宽度：200px；
背景尺寸：封面；
显示：内联块；
}

input[type='checkbox']{
显示：块；
身高：0；
宽度：0；
不透明度：0；
溢出：隐藏；
}
输入[type='checkbox']+标签{
背景：url（'http://lorempixel.com/30/30/")不重复;；
高度：30px；
宽度：30px；
背景尺寸：封面；
显示：内联块；
}
输入[type='checkbox']：选中+标签{
背景：url（'http://lorempixel.com/50/200/")不重复;；
高度：50px；
宽度：200px；
背景尺寸：封面；
显示：内联块；
}

使用

不透明度：0使其透明

使用

不透明度：0使其透明

更改不透明度，然后移动复选框效果很好。非常感谢。我使用了这个，它工作得很好，但是我的div带有overflow:scroll，这会禁用滚动功能。知道为什么吗？@Naomi我不知道为什么会这样。这不会以任何方式影响滚动。更改不透明度，然后移动复选框效果很好。非常感谢。我使用了这个，它工作得很好，但是我的div带有overflow:scroll，这会禁用滚动功能。知道为什么吗？@Naomi我不知道为什么会这样。这不会以任何方式影响滚动。