Css 将边框应用于Chrome中的复选框

我的网站上有很多表格，当然，其中的许多字段都是必需的。如果必填字段为空，则会为其分配一个“error”类，我会尝试用红色圈出该字段，无论它是文本字段、下拉菜单还是复选框。 我的css文件中有以下代码：

.error input, .error select, .error textarea {
    border-style: solid;
    border-color: #c00;
    border-width: 2px;
}

input[type=checkbox] {
    background:transparent;
    border:0;
    margin-top: 2px;
}

现在奇怪的是，它在IE中工作得很好，但是在Chrome中，复选框没有用红色圈起来，尽管我可以看到CSS在检查元素时应用于它们

这可能与上面的css代码处于活动状态无关，但我的css文件中还有其他内容：

.error input, .error select, .error textarea {
    border-style: solid;
    border-color: #c00;
    border-width: 2px;
}

input[type=checkbox] {
    background:transparent;
    border:0;
    margin-top: 2px;
}

这样就可以在IE8及以下版本中正确显示复选框

你知道我如何在Chrome中可视化红色边框吗

编辑： 下面是一个JSFIDLE：

---

就这样做吧，这样你的选择器就错了：。错误输入，。错误选择，。错误文本区域：

这是我的建议

特别是对于复选框，请使用大纲：2px solid F00；，但请记住，边界仍然是可见的。设置输入字段的样式以使其在多个浏览器中都能很好地显示，这既棘手又不可靠

对于一个完全定制样式的复选框，请参见下面的内容

编辑播放：轮廓偏移：10px

复选框和单选按钮CSS样式边框，无任何图像或内容。只是纯css

JSFIDLE链路

---

对我有用。只有大纲不行

输入[type=checkbox]。有错误{ 轮廓：1px纯红！重要；

---

}

请附上一份JSFIDD，这是：您好，谢谢！最初我是这样做的，但是，输入在一个包含类“error”的div中。如果我这样做的话，复选框会得到带有红线的圆圈，但是旁边的标签也有相同的边框，这很难看，这就是为什么我试图将其应用于输入。这里有一个更像这样的东西：我试着只圈出复选框，没有标签，然后是它下面的输入文本字段。这实际上很有帮助，下面是我想到的：这里的问题是，在IE中，复选框有4px边框，现在将轮廓和边框添加在一起..最后一次尝试-完全自定义样式的复选框：来源：插图没有帮助，因为它一直将其添加到边框中。然而，我最终根据您的建议更改了其余元素的边框，使其成为大纲，现在它在所有浏览器中都能正常工作。以下是有效的解决方案：非常感谢！我找到的最好的解决办法。谢谢