Html 网格中的CSS自定义复选框-can'；不要删除原始复选框

我在网格中有一些复选框，希望使用普通的css和html来创建一个自定义复选框。那很好。问题是原始复选框的剩余框，它保留在我的网格中，并使它在获取单元格时以奇怪的方式运行。甚至当我将其透明化或停用时，正如人们经常建议的那样

在最初的示例中，他们将其移出了屏幕区域，但我可以使其脱离网格

我认为这是它没有表现出我想要的行为的部分：

[type=“checkbox”]：未（：选中），
[type=“checkbox”]：选中{
位置：绝对位置；
左：-9999px；
}

下面是一个简单的例子：

以下是我使用的示例：

以下是我正在处理的真正代码：

谢谢你的帮助。我确信这是很常见的，但是作为一个初学者，我可能没有以正确的方式使用css？

在您的“最小”和“真实代码”示例中，您的“新复选框”注释都没有正确打开

举个简单的例子： 第23行：

*新复选框*/

s/b

/*新复选框*/

在实际代码示例中： 第123行：

*新复选框和单选按钮*/

s/b

/*新复选框和单选按钮*/

如果您修复了这些行，您的代码应该可以正常工作

---

另外，我注意到在第102行中，您将

/

放在

可见性：隐藏之前。如果您想注释这一行，此语法在CSS中无效。
您可以看到，您的
标签
和
输入
元素处于同一级别，甚至具有
位置：绝对您的
输入仍然是网格的一部分。替换了
标签中的
输入
，添加了
span
元素并重写了CSS

虽然在你的代码中

* New Checkboxes*/

/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}

第一条评论不正确，所以下一条声明不起作用


.body{
身高：100%；
}
.外箱{
显示：网格；
保证金：自动；
背景颜色：绿色；
宽度：300px；
自对准：居中；
栅隙：10px；
}
.内盒{
显示：网格；
宽度：80%；
背景色：红色；
自对准：居中；
保证金：5px 5px 5px 5px；
}
/*新复选框*/
/*标签样式的基础*/
[type=“checkbox”]{
位置：绝对位置；
左：-9999px；
}
[type=“checkbox”]：未（：选中）+span，
[type=“checkbox”]：选中+span{
位置：相对位置；
左侧填充：1.95em；
光标：指针；
}
/*复选框方面*/
[type=“checkbox”]：未（：选中）+span:before，
[type=“checkbox”]：选中+span:之前{
内容：''；
位置：绝对位置；
左：0；
排名：0；
宽度：1米；
高度：1米；
边框：1px纯灰；
背景：透明；
}
/*复选标记方面*/
[type=“checkbox”]：未（：选中）+span:after，
[type=“checkbox”]：选中+span:之后{
内容：'\2713\0020'；
位置：绝对位置；
顶部：.05em；
左：2米；
字体大小：1.3em；
线高：0.8；
颜色：白烟；
过渡：all.2s；
字体系列：Arial；
}
/*选中标记方面的更改*/
[type=“checkbox”]：未（：选中）+span:after{
不透明度：0；
变换：比例（0）；
}
[type=“checkbox”]：选中+span:之后{
不透明度：1；
变换：比例（1）；
}

一些文本
选择框1
选择框2
有趣的是，我想我得多考虑一下网格的问题。