css - Google Chrome 中的单选按钮和复选框异常行为

Question

在过去的几个月里，Google 更新了 Chrome，我认为破坏了我网站上的单选按钮和复选框。我使用的是 31.0.1650.63 版本

它们在我尝试过的所有其他浏览器(FF、Safari、IE9 和 IE10)中都能正常工作。过去几个月我完全没有修改我的 CSS，所以我认为这是 Google Chrome 浏览器的问题。

我创建了一个简单的 jsFiddle 来显示我正在谈论的行为(以及指向我的 CSS 文件的外部链接):

http://jsfiddle.net/v22WB/

<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 

我已使用 Chrome 的开发工具禁用样式表中的所有样式，但没有成功。

我使用的是 Twitter Bootstrap 2.0.2，但是当我单独引用该文件时，单选按钮和复选框是正常的。有什么想法吗？

Answer 1

您的样式表中有这一行:

html body *:focus{outline-color:transparent;outline-style:none;-webkit-appearance:none}

-webkit-appearance:none 表示具有焦点的输入元素(即选中的单选框或复选框)不会在视觉上显示为输入元素。参见 this link关于自定义输入样式。把它去掉，你的复选框应该恢复正常。