Google Chrome 中的单选按钮和复选框异常行为
Posted
技术标签:
【中文标题】Google Chrome 中的单选按钮和复选框异常行为【英文标题】:Radio Button and Checkbox wonky behavior in Google Chrome 【发布时间】:2014-01-28 18:36:57 【问题描述】:在过去的几个月里,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,但是当我自己引用该文件时,单选按钮和复选框是正常的。有什么想法吗?
【问题讨论】:
【参考方案1】:你的样式表中有这一行:
html body *:focusoutline-color:transparent;outline-style:none;-webkit-appearance:none
-webkit-appearance:none 表示具有焦点的输入元素(即选定的单选框或复选框)不会在视觉上显示为输入元素。请参阅this link 了解自定义输入样式。把它拿出来,你的复选框应该会恢复正常。
【讨论】:
以上是关于Google Chrome 中的单选按钮和复选框异常行为的主要内容,如果未能解决你的问题,请参考以下文章