我的网站上有很多表格,当然,其中的许多字段都是必需的.如果必填字段为空,则会为其分配“错误”类,并且我尝试将该字段圈成红色,无论它是文本字段,下拉菜单还是复选框.
我的css文件中有以下代码：
我的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/
解决方法
@H_502_22@ 就这样做(你的选择器错了：.error输入,.error textarea)：input[type=checkBox] { outline: 2px solid #F00; }
这是jsFiddle
特别是对于复选框使用大纲：2px solid#F00 ;,但请记住边框仍然可见.样式化输入字段以在多个浏览器中查看它们很复杂且不可靠.
对于完全自定义样式的复选框,请参阅此Gist中的jsFiddle.
编辑播放：outline-offset：10px;
