将边框应用到Chrome中的复选框 [英] Applying border to a checkbox in Chrome

问题描述

我在我的网站上有很多表单，当然，它们中的许多字段都是必需的。如果必填字段为空，则会为其指定一个错误类，并且我尝试将该字段以红色圈起，无论它是文本字段，下拉菜单还是复选框。
我在css文件中有以下代码：

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:

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

现在奇怪的是，在IE中工作良好，但在Chrome中的复选框没有圈出在红色，虽然我可以看到CSS是应用于检查元素时他们。

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.

这可能是不相关的css代码上面是活跃的，但我有一些东西否则在我的css文件中：

And this might be irrelevant at the css code above is active but I do have something else in my css file:

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

这是为了使复选框在IE8及更低版本中正确显示。

And that is used so that the checkboxes are displayed correctly in IE8 and less.

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

Any ideas how I can visualize the red border in Chrome?

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

推荐答案

只要这样做（你的选择器是错误的： .error input，.error select，.error textarea ）：

Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):

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

这里是 jsFiddle

Here's the jsFiddle

特别对于复选框，请使用 outline：2px solid＃F00; ，但请记住，边框仍然可见。对于在多个浏览器中查看的输入字段，样式非常复杂和不可靠。

Specifically for a checkbox use 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.

对于完全自定义的样式复选框，请参阅 jsFiddle 从此 Gist 。

For a completely custom styled checkbox, see this jsFiddle from this Gist.

编辑使用： outline-offset：10px;

EDIT Play with: outline-offset: 10px;

这篇关于将边框应用到Chrome中的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！