Question

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

Answer 1

我正在更广泛地回答那些遇到问题但未在Chrome中显示的复选框。并由谷歌指导。您可能也在Safari中遇到此问题，因为两者目前都在使用WebKit。

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

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

现在它运作正常。

success

正如您所看到的，另一位开发人员添加了-webkit-appearance: none;，就像您的情况一样。在我们的例子中，因为我开始使用主题。

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

Answer 2

CSS中的这一行：

-webkit-appearance: none;

input, button, select, textarea的样式规则正在为您打破局面。

Answer 3

您已定义样式规则：

-webkit-appearance: none;

为input, button, select, textarea定义，您必须将其删除并继续使用。

你在控制台中也有一个JS错误：Uncaught ReferenceError: containerz is not defined，请查看。

Answer 4

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

Answer 5

取消定义复选框的宽度和高度。我遇到了同样的错误，但是我注意到我已经将复选框的width和height设置为较小的值，所以我删除了这些属性。

Answer 6

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

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

Answer 7

将checkbox的值设置为true对我有用

value="true"

Answer 8

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

所以我制定此规则只是为了避免出现这种情况：

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

Answer 9

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

它只是解决了我的问题

Answer 10

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