Checkboxes not displaying Chrome - Work in other browsers

Question

I'm not sure what is going on. There should be a checkbox to the left of "Remember Me" and two test ones at the bottom for I have a bike, I have a car. They display in Firefox but not in Chrome. I believe I have a CSS problem but can't find it? Can anyone please help?

http://www.cloudtute.com/auth

score 40 · Answer 1 · edited Jun 30 '17 at 17:29

I am answering on a broader level to those that are running into this issue of checkboxes not showing up in Chrome. And were directed here by google. You may also have this problem in Safari since both are currently using WebKit.

We ran into this issue on our own website where the checkboxes and radio inputs were not displaying properly. But fixed it by adding this to our CSS.

input[type=checkbox]
{
  -webkit-appearance:checkbox;
}

Now it works fine.

success

As you can see, another developer had added -webkit-appearance: none; just like in your case. In our case it was because I had started with a theme.

But to make absolutely sure that the inputs show up, it is safe to just declare those rules in your CSS. In this page I placed the styles in the <style> tag (which I don't recommend) but I took the screenshot when I was still testing. The better practice would be to remove the conflicting styles and add styles in the appropriate folder.

Additional Resources:
https://css-tricks.com/almanac/properties/a/appearance/
https://davidwalsh.name/webkit-appearance
What is WebKit and how is it related to CSS?
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

Mathijs Flietstra · Accepted Answer · 2017-11-05T09:27:44.860

31

This line in your CSS:

-webkit-appearance: none;

In the style rule for input, button, select, textarea is breaking things for you.

edited Nov 05 '17 at 09:27

answered May 19 '13 at 08:59

Mathijs Flietstra

12,900
3
38
67

Thank you both. I have removed that line but it still doesn't show up. Any further ideas - or have I made another mistake? – user1149620 May 19 '13 at 09:57
1

Are you very sure that you have removed that line? When I check your website, I can see that it is still there, and as soon as I turn it off, your checkboxes appear.. – Mathijs Flietstra May 19 '13 at 10:09
Thank you - it turns out the CSS was not uploading correctly. – user1149620 May 19 '13 at 10:17

score 5 · Answer 3 · answered May 19 '13 at 09:02

5

You have defined the style rule:

-webkit-appearance: none;

defined for input, button, select, textarea, you have to remove it and will work.

You have also a JS error in console: Uncaught ReferenceError: containerz is not defined, check it out.

answered May 19 '13 at 09:02

Irvin Dominin

30,819
9
77
111

score 2 · Answer 4 · edited Aug 31 '15 at 12:02

2

If you give width 0px to a checkbox in Firefox, you'll be able to see it but if you open the same code in Chrome, the checkbox will be invisible.

edited Aug 31 '15 at 12:02

halfer

19,824
17
99
186

answered Feb 22 '15 at 23:07

user1813774

33
1
5

Thank you! Your answer helped.. width: 0px was my problem! :) – yathrakaaran Mar 16 '19 at 20:44

score 1 · Answer 5 · answered Apr 03 '20 at 22:29

1

Eliminate the definition of width and height of the checkbox. I had the same error, but I noticed that I had already put small value of width and height of the checkbox, so I removed these properties.

answered Apr 03 '20 at 22:29

Ramadan Alrai

19
4

score 0 · Answer 6 · answered Nov 24 '16 at 18:59

0

I had the same problem. When I disabled Ad-Block extension it worked!

Then I added an exception to this site in Ad-Block.

answered Nov 24 '16 at 18:59

GEORGE TARANTILS

58
2
7

This might be better as a comment – JGallardo Apr 19 '18 at 22:22

score 0 · Answer 7 · answered Mar 16 '17 at 02:44

0

Setting the value of checkbox to true worked for me

value="true"

answered Mar 16 '17 at 02:44

Jay Star

188
1
14

score 0 · Answer 8 · answered Apr 17 '20 at 15:07

0

For some weird reason removing this line height: 100% from my CSS solved the problem. The checkbox was under a table's td element.

So I made this rule just to avoid that single case:

table td > input:not([type='checkbox']) {
    height: 100%;
}

answered Apr 17 '20 at 15:07

Emir

380
3
11

score 0 · Answer 9 · answered Aug 24 '20 at 14:57

0

input[type=checkbox] {
    display: block;
}

it simply solved my issue

answered Aug 24 '20 at 14:57

Tanmoy Bhowmick

1,305
15
20

1

adding why you did this may be helpful to future users – con Aug 24 '20 at 18:56

score 0 · Answer 10 · answered Sep 11 '20 at 08:40

0

I managed to resolve this by removing the form-control class from my checkbox

answered Sep 11 '20 at 08:40

Bassie

9,529
8
68
159

Checkboxes not displaying Chrome - Work in other browsers

10 Answers10

Linked