CODEWITHSUNDEEP
csstwitter-bootstrapgoogle-chromecheckboxradio-button
Nick
Nick

Reputation: 43

Radio Button and Checkbox wonky behavior in Google Chrome

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?

Upvotes: 2

Views: 6180

Answers (1)

Phire
Phire

Reputation: 398

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.

Upvotes: 3

Related Questions