Radio Button and Checkbox wonky behavior in Google

问题:

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?

回答1:

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.