Html 自定义设计复选框按钮

我试图自定义设计复选框按钮，使它们看起来不像典型的复选框按钮。我正在努力实现以下目标：

（请注意，复选标记和交叉标记都是图像。）

到目前为止，我已经能够做到这一点：

但我似乎无法摆脱勾号出现的白色小复选框。我正在尝试更改选中复选框按钮的css。例如，如果选中“是”，则边框将变为绿色，否则将保持灰色

有可能吗

编辑：

.btn主{
背景色：#f6f9fc；
边框：1px实心Rgba（61,70,77,0.1）；
字体大小：11px；
颜色：#3d464d；
宽度：200px；
高度：200px；
}

对
不

只是在玩，仅css，没有图像或js:

input[type=“checkbox”].myClass{
显示：无；
}
输入[type=“checkbox”]。myClass+标签{
盒影：镶嵌0 1px银色；
边界半径：0.25em；
显示：内联块；
字体系列：无衬线；
不透明度：0.5；
填料：1米1米2米1米；
文本对齐：居中；
宽度：10em；
-webkit用户选择：无；
用户选择：无；
}
输入[type=“checkbox”]。myClass+标签：在{
背景图像：线性渐变（向左，黑色，黑色），线性渐变（向左，黑色，黑色）；
背景尺寸：2px 50%，25%2px；
背景重复：无重复；
背景位置：0.75em 0.625em，0.75em 0.625em；
边界半径：50%；
盒影：嵌入0.2px黑色；
内容：“；
显示：块；
高度：2米；
保证金：1em自动；
变换：旋转（-135度）；
宽度：2米；
}
输入[type=“checkbox”]。myClass+标签：之后{
内容：“是”；
}
输入[type=“checkbox”]。myClass:选中+标签{
盒影：镶嵌0.1px红色，0.25em 0银色；
颜色：红色；
不透明度：1；
}
输入[type=“checkbox”]。myClass:选中+标签：之前{
背景图像：线性渐变（向左，红色，红色），线性渐变（向左，红色，红色）；
背景尺寸：2px 50%，50%2px；
背景重复：无重复；
背景位置：中-中，中-中；
盒子阴影：嵌入0.2px红色；
}
输入[type=“checkbox”]。myClass:选中+标签：之后{
内容：“否”；
}

---

只是在玩，仅css，没有图像或js:

input[type=“checkbox”].myClass{
显示：无；
}
输入[type=“checkbox”]。myClass+标签{
盒影：镶嵌0 1px银色；
边界半径：0.25em；
显示：内联块；
字体系列：无衬线；
不透明度：0.5；
填料：1米1米2米1米；
文本对齐：居中；
宽度：10em；
-webkit用户选择：无；
用户选择：无；
}
输入[type=“checkbox”]。myClass+标签：在{
背景图像：线性渐变（向左，黑色，黑色），线性渐变（向左，黑色，黑色）；
背景尺寸：2px 50%，25%2px；
背景重复：无重复；
背景位置：0.75em 0.625em，0.75em 0.625em；
边界半径：50%；
盒影：嵌入0.2px黑色；
内容：“；
显示：块；
高度：2米；
保证金：1em自动；
变换：旋转（-135度）；
宽度：2米；
}
输入[type=“checkbox”]。myClass+标签：之后{
内容：“是”；
}
输入[type=“checkbox”]。myClass:选中+标签{
盒影：镶嵌0.1px红色，0.25em 0银色；
颜色：红色；
不透明度：1；
}
输入[type=“checkbox”]。myClass:选中+标签：之前{
背景图像：线性渐变（向左，红色，红色），线性渐变（向左，红色，红色）；
背景尺寸：2px 50%，50%2px；
背景重复：无重复；
背景位置：中-中，中-中；
盒子阴影：嵌入0.2px红色；
}
输入[type=“checkbox”]。myClass:选中+标签：之后{
内容：“否”；
}

可能是重复的，请确定它们是图像，但您能发布您的代码吗？一把小提琴就可以了great@NicoO谢谢你的评论。我已经回答了那个问题，在我的特殊情况下，它无法帮助我。@JohannKratzik请查看已编辑的问题。单击标签将切换复选框，这样您就可以设置

input[type=“checkbox”]{display:none；}

来完成这个任务！有可能是重复的，当然是图片，但是你能发布你的代码吗？一把小提琴就可以了great@NicoO谢谢你的评论。我已经回答了那个问题，在我的特殊情况下，它无法帮助我。@JohannKratzik请查看已编辑的问题。单击标签将切换复选框，这样您就可以设置

input[type=“checkbox”]{display:none；}

来完成这个任务！谢谢你的回答。这是一个比使用图像更好的解决方案。不过，只有一个问题，如果我想为“是”和“否”分别设置复选框，我如何为这两个复选框分别设置css？目前css应用于全局“输入”元素。谢谢你的回答。这是一个比使用图像更好的解决方案。不过，只有一个问题，如果我想为“是”和“否”分别设置复选框，我如何为这两个复选框分别设置css？目前，css应用于全局“输入”元素。