Css 在不接触复选标记的情况下设置复选框的样式

我只想改变背景颜色，去掉边框，这样我就有了一个白色的正方形

有一种可行的方法（IE除外），你可以隐藏输入，并在它的位置放置一个span元素，但它隐藏了复选标记（选中状态），并且要求你使用自己的图像

另一个答案是：

.myCheckbox input {
    display: none;
}

.myCheckbox span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("link_to_image");
    }

.myCheckbox input:checked + span {
    background: url("link_to_another_image");
}

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
    <input type="checkbox" name="test"/>
    <span></span>
</label>

.myCheckbox输入{
显示：无；
}
.myCheckbox span{
宽度：20px；
高度：20px；
显示：块；
背景：url（“链接到图片”）；
}
.myCheckbox输入：选中+span{
背景：url（“链接到另一张图片”）；
}
我的样式化“复选框”的标签

---

我想使用默认复选标记。

您不能设置复选框的样式。这总是通过一个或另一个黑客来完成的。这真是个骗局。这里有足够的资源，我不想重复了。

这篇文章不是重复。他在问如何模糊地设置复选框的样式，而我在问如何在不触及复选标记的情况下设置复选框的样式。问题是隐藏复选框也会隐藏复选标记，你需要提供自己的复选标记，我不想这样做。答案是，你不能。我真的想不出任何合适的方法。想到的一个技巧是在带有非transparent边框的ckeckbox上放置一个透明的div，但这是不合适的，因为浏览器之间没有关于如何呈现输入项（包括复选框）的标准。它们可以是不同的大小、有边框（或无边框）、框阴影（或无边框）、高亮显示（或无边框）、不同的背景色。我认为这将是一场灾难。为什么显示实际的复选标记很重要？我想这不是绝对必要的，默认的复选框样式对我想要实现的目标非常有用。没什么大不了的。有一些漂亮的复选标记（和复选框）。