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?
10 Answers
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.
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
This line in your CSS:
-webkit-appearance: none;
In the style rule for input, button, select, textarea
is breaking things for you.
-
Thank you both. I have removed that line but it still doesn't show up. Any further ideas - or have I made another mistake? Commented May 19, 2013 at 9:57
-
1Are 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.. Commented May 19, 2013 at 10:09
-
Thank you - it turns out the CSS was not uploading correctly. Commented May 19, 2013 at 10:17
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.
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.
-
Thank you! Your answer helped.. width: 0px was my problem! :) Commented Mar 16, 2019 at 20:44
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.
I had the same problem. When I disabled Ad-Block extension it worked!
Then I added an exception to this site in Ad-Block.
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%;
}
input[type=checkbox] {
display: block;
}
it simply solved my issue
-
1