单选按钮和Checkbox在Google Chrome中的行为很糟糕

Question

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

它们在我尝试过的所有其他浏览器中都能正常工作（FF，Safari，IE9和IE10）。我最近几个月没有修改我的CSS，所以我认为这是谷歌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。拿出来，你的复选框应该恢复正常。