将边框应用于 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/

Here's a 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"https://gist.github.com/stucox/2556785" rel="noreferrer">要点.

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

编辑:outline-offset: 10px;

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