单选按钮和复选框在Google Chrome中的不稳定行为 [英] Radio Button and Checkbox wonky behavior in Google Chrome

问题描述

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

它们在我尝试的所有其他浏览器（FF，Safari，IE9和IE10）中正常工作。我在过去几个月没有修改我的CSS，所以这就是为什么我认为这是一个问题与Google Chrome。

我创建了一个简单的jsFiddle显示我正在谈论的行为（和一个外部链接到我的CSS文件）：

http://jsfiddle.net/v22WB/

 < input type = name =sexvalue =male>男性< br> 
< input type =radioname =sexvalue =female>女性< br> 
< input type =checkboxname =vehiclevalue =Bike>我有一辆自行车< br> 
< input type =checkboxname =vehiclevalue =Car>我有一辆车
  

我使用Chrome的开发工具来禁用样式表中的所有样式，但没有运气。

我使用的是Twitter Bootstrap 2.0.2，但当我自己引用该文件时，单选按钮和复选框是正常的。任何想法？

解决方案

您的样式表中有这一行：

  html body *：focus {outline-color：transparent; outline-style：none; -webkit-appearance：none} 
  pre> 
 
 
  -webkit-appearance：none 表示没有显示具有焦点的输入元素（即所选的单选框或复选框）作为输入元素。有关自定义输入样式的信息，请参见此链接 。取出，您的复选框应该恢复正常。
 
Within the past few months, Google has updated Chrome and I think has broken radio buttons and checkboxes on my website. I'm using version 31.0.1650.63 

They work correctly in all other browsers I've tried (FF, Safari, IE9 & IE10). I haven't modified my CSS at all the last few months, so that's why I think it's an issue with Google Chrome.

I've created a simple jsFiddle that shows the behavior I'm talking about (and an external link to my CSS file):

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 
I've used Chrome's dev tools to disable all styles from the stylesheet but with no luck. 

I'm using Twitter Bootstrap 2.0.2, but when I reference that file by itself, the radio buttons and checkboxes are normal. Any ideas?
解决方案
You've got this line in your stylesheet: 
html body *:focus{outline-color:transparent;outline-style:none;-webkit-appearance:none}
The -webkit-appearance:none means input elements that have focus (ie a selected radio box or checkbox) aren't being displayed as input elements visually. See this link about customizing input styles. Take that out and your checkboxes should be back to normal.

                        
这篇关于单选按钮和复选框在Google Chrome中的不稳定行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！