将边框应用于 Chrome 中的复选框答案

【问题标题】：Applying border to a checkbox in Chrome将边框应用于 Chrome 中的复选框
【发布时间】：2013-07-15 20:50:28
【问题描述】：

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

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

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

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

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

这是为了让复选框在 IE8 和更少版本中正确显示。

任何想法如何在 Chrome 中可视化红色边框？

编辑：这是一个jsfiddle： http://jsfiddle.net/PCD6f/3/

【问题讨论】：

请包含一个 jsFiddle
这里是：jsfiddle.net/PCD6f/3

标签： css google-chrome checkbox border

【解决方案1】：

就这样做（你的选择器错了：.error input, .error select, .error textarea）：

input[type=checkbox] {
    outline: 2px solid #F00;
}

这是jsFiddle

checkbox 使用 outline: 2px solid #F00;，但请记住边框仍然可见。为输入字段设置样式以使其在多个浏览器中看起来都很好，这既棘手又不可靠。

有关完全自定义样式的复选框，请参见 jsFiddle 和 Gist。

编辑玩：outline-offset: 10px;

【讨论】：

您好，谢谢！最初我是这样的，但是，输入位于包含类“错误”的 div 中。如果我这样做，复选框会得到带有红线的圆圈，但是旁边的标签也有相同的边框，这很丑，这就是为什么我试图将它应用于输入。 jsfiddle.net/PCD6f/3
这里有一些类似的东西：jsfiddle.net/PCD6f/5 我试图只圈出复选框，没有标签，然后是它下面的输入文本字段。
这实际上有帮助，这就是我想出的：jsfiddle.net/PCD6f/7 这里的问题是，在 IE 中，复选框有 4px 边框现在将轮廓和边框加在一起..
最后一次尝试 - 完全自定义样式的复选框：jsfiddle.net/achudars/8wW74 来源：gist.github.com/stucox/2556785
好吧，插图没有帮助，因为它不断将其添加到边框。但是，我最终根据您的建议将其余元素的边框也更改为轮廓，现在它在所有浏览器中都运行良好。这是有效的解决方案：jsfiddle.net/PCD6f/8 非常感谢！

【解决方案2】：

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

JSFiddle 链接here

    input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}

/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}

【讨论】：

我找到的最佳解决方案。谢谢。

【解决方案3】：

对我有用。只有大纲不起作用。

input[type=checkbox].has-error{ outline: 1px solid red !important; }

【讨论】：