CSS 复选框不显示 Chrome - 在其他浏览器中工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16632955/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Checkboxes not displaying Chrome - Work in other browsers
提问by user1149620
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?
我不确定发生了什么。“记住我”左侧应该有一个复选框，底部应该有两个测试复选框，因为我有一辆自行车，我有一辆汽车。它们在 Firefox 中显示，但不在 Chrome 中显示。我相信我有 CSS 问题，但找不到？有人可以帮忙吗？
回答by JGallardo
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.
我在更广泛的层面上回答那些遇到此问题的复选框未显示在 Chrome 中的问题。并被谷歌定向到这里。您在 Safari 中也可能遇到此问题，因为两者目前都在使用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.
我们在自己的网站上遇到了这个问题，其中复选框和无线电输入显示不正确。但是通过将它添加到我们的 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.
如您所见，另一位开发人员添加-webkit-appearance: none;了与您的情况类似的内容。在我们的例子中，这是因为我从一个主题开始。
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.
但是为了绝对确保输入显示出来，在 CSS 中声明这些规则是安全的。在此页面中，我将样式放在<style>标签中（我不推荐这样做），但我在仍在测试时截取了屏幕截图。更好的做法是删除冲突的样式并在适当的文件夹中添加样式。
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
其他资源：
https: //css-tricks.com/almanac/properties/a/appearance/
https://davidwalsh.name/webkit-appearance
什么是 WebKit，它与 CSS 有什么关系？
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html
回答by Mathijs Flietstra
This line in your CSS:
CSS 中的这一行：
-webkit-appearance: none;
In the style rule for input, button, select, textareais breaking things for you.
在风格规则中，input, button, select, textarea为你打破东西。
回答by Irvin Dominin
You have defined the style rule:
您已经定义了样式规则：
-webkit-appearance: none;
defined for input, button, select, textarea, you have to remove it and will work.
定义为input, button, select, textarea，您必须将其删除才能工作。
You have also a JS error in console: Uncaught ReferenceError: containerz is not defined, check it out.
您在控制台中也有一个 JS 错误：Uncaught ReferenceError: containerz is not defined，检查一下。
回答by Ramadan Alrai
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.
取消复选框的宽度和高度的定义。我有同样的错误，但我注意到我已经在复选框的宽度和高度上设置了很小的值，所以我删除了这些属性。
回答by user1813774
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.
如果您在 Firefox 中为复选框指定宽度 0px，您将能够看到它，但如果您在 Chrome 中打开相同的代码，则该复选框将不可见。
回答by GEORGE TARANTILS
I had the same problem. When I disabled Ad-Block extension it worked!
我有同样的问题。当我禁用 Ad-Block 扩展时，它起作用了！
Then I added an exception to this site in Ad-Block.
然后我在 Ad-Block 中为该站点添加了一个例外。
回答by Jay Star
Setting the value of checkbox to true worked for me
将复选框的值设置为 true 对我有用
value="true"
回答by Emir
For some weird reason removing this line height: 100%from my CSS solved the problem. The checkbox was under a table's tdelement.
出于某种奇怪的原因，height: 100%从我的 CSS 中删除这一行解决了这个问题。复选框位于表格td元素下。
So I made this rule just to avoid that single case:
所以我制定了这个规则只是为了避免这种单一的情况：
table td > input:not([type='checkbox']) {
height: 100%;
}
