未显示 Chrome 的复选框 - 在其他浏览器中工作答案

【问题标题】：Checkboxes not displaying Chrome - Work in other browsers未显示 Chrome 的复选框 - 在其他浏览器中工作
【发布时间】：2013-05-14 00:47:58
【问题描述】：

我不确定发生了什么。 “记住我”左侧应该有一个复选框，底部应该有两个测试框，因为我有一辆自行车，我有一辆汽车。它们在 Firefox 中显示，但在 Chrome 中不显示。我相信我有 CSS 问题但找不到？有人可以帮忙吗？

http://www.cloudtute.com/auth

【问题讨论】：

标签： css google-chrome firefox checkbox

【解决方案1】：

我设法通过从我的复选框中删除 form-control 类来解决此问题

【讨论】：

【解决方案2】：

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

它只是解决了我的问题

【讨论】：

添加您这样做的原因可能对未来的用户有所帮助

【解决方案3】：

出于某种奇怪的原因，从我的 CSS 中删除这一行 height: 100% 解决了这个问题。该复选框位于表格的 td 元素下。

所以我制定这条规则只是为了避免这种单一的情况：

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

【讨论】：

【解决方案4】：

取消复选框宽度和高度的定义。我有同样的错误，但我注意到我已经把复选框的宽度和高度值设置得很小，所以我删除了这些属性。

【讨论】：

【解决方案5】：

CSS 中的这一行：

-webkit-appearance: none;

input, button, select, textarea 的风格规则对你不利。

【讨论】：

谢谢你们。我已经删除了那条线，但它仍然没有出现。任何进一步的想法 - 还是我犯了另一个错误？
您确定已删除该行吗？当我检查您的网站时，我可以看到它仍然存在，一旦我关闭它，您的复选框就会出现..
谢谢 - 原来 CSS 没有正确上传。

【解决方案6】：

我正在更广泛地回答那些遇到此复选框未在 Chrome 中显示的问题的人。并被谷歌定向到这里。您在 Safari 中也可能遇到此问题，因为两者当前都在使用 WebKit。

我们在自己的网站上遇到了这个问题，其中复选框和单选输入未正确显示。但是通过将它添加到我们的 CSS 来修复它。

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

现在它工作正常。

如您所见，另一位开发人员添加了-webkit-appearance: none;，就像您的情况一样。在我们的案例中，这是因为我从一个主题开始。

但为了绝对确保输入显示出来，只需在 CSS 中声明这些规则是安全的。在这个页面中，我将样式放在了<style> 标签中（我不推荐这样做），但我还在测试时截取了屏幕截图。更好的做法是删除冲突的样式并在适当的文件夹中添加样式。

其他资源：
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

【讨论】：

你救了我的命。文学。

【解决方案7】：

将复选框的值设置为 true 对我有用

value="true"

【讨论】：

【解决方案8】：

我遇到了同样的问题。当我禁用 Ad-Block 扩展时，它起作用了！

然后我在 Ad-Block 中为该网站添加了一个例外。

【讨论】：

作为评论可能会更好

【解决方案9】：

如果您在 Firefox 中为复选框指定宽度 0px，您将能够看到它，但如果您在 Chrome 中打开相同的代码，则该复选框将不可见。

【讨论】：

谢谢！你的回答有帮助.. width: 0px 是我的问题！ :)

【解决方案10】：

你已经定义了样式规则：

-webkit-appearance: none;

为input, button, select, textarea 定义，您必须将其删除才能正常工作。

你在控制台也有JS错误：Uncaught ReferenceError: containerz is not defined，检查一下。

【讨论】：