CSS 将边框应用于 Chrome 中的复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17697455/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Applying border to a checkbox in Chrome
提问by mmvsbg
I have a lot of forms on my website with, of course, many of the fields in them being required. If required field is left empty, it is assigned an 'error' class and I'm trying to circle the field in red regardless whether it is a text field, drop down menu or a checkbox. I have the following code in my css file:
我的网站上有很多表格，当然，其中的许多字段都是必需的。如果必填字段为空，则会为其分配一个“错误”类，并且我尝试将该字段圈为红色，无论它是文本字段、下拉菜单还是复选框。我的 css 文件中有以下代码：
.error input, .error select, .error textarea {
border-style: solid;
border-color: #c00;
border-width: 2px;
}
Now strangely enough that works well in IE but in Chrome the checkboxes are not circled in red although I can see that the CSS is applied to them when inspecting the element.
现在奇怪的是，它在 IE 中运行良好，但在 Chrome 中，复选框没有用红色圈出，尽管我可以看到在检查元素时将 CSS 应用于它们。
And this might be irrelevant at the css code above is active but I do have something else in my css file:
这可能与上面的 css 代码处于活动状态无关，但我的 css 文件中确实有其他内容：
input[type=checkbox] {
background:transparent;
border:0;
margin-top: 2px;
}
And that is used so that the checkboxes are displayed correctly in IE8 and less.
并且使用该复选框以便在 IE8 及更低版本中正确显示复选框。
Any ideas how I can visualize the red border in Chrome?
任何想法如何在 Chrome 中可视化红色边框？
EDIT: Here's a jsfiddle: http://jsfiddle.net/PCD6f/3/
编辑：这是一个 jsfiddle：http: //jsfiddle.net/PCD6f/3/
回答by acudars
Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):
就这样做（你的选择器是错误的：.error input, .error select, .error textarea）：
input[type=checkbox] {
outline: 2px solid #F00;
}
Here's the jsFiddle
这是jsFiddle
Specifically for a checkboxuse outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.
专门用于复选框使用outline: 2px solid #F00;，但请记住，边框仍然可见。对输入字段进行样式设置以在多个浏览器中显示它们是棘手且不可靠的。
For a completely custom styled checkbox, see this jsFiddlefrom this Gist.
对于完全自定义样式的复选框，请参阅此Gist 中的jsFiddle。
EDITPlay with: outline-offset: 10px;
编辑玩：outline-offset: 10px;
回答by Velu S Gautam
Check Box, and Radio Button CSS Styling Border without any image or content. Just pure css.
没有任何图像或内容的复选框和单选按钮 CSS 样式边框。只是纯css。
JSFiddle Link here
JSFiddle 链接在这里
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;
}
回答by swati sharma
Works for me.only outline doesn't work.
对我有用。只有大纲不起作用。
input[type=checkbox].has-error{
outline: 1px solid red !important;
}
input[type=checkbox].has-error{
outline: 1px solid red !important;
}
