复选框不显示 Chrome - 在其他浏览器中工作

Question

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

http://www.cloudtute.com/auth

Answer 1

我在更广泛的层面上回答那些遇到此问题的复选框未显示在 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
什么是 WebKit，它与 CSS 有什么关系？
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

Answer 2

CSS 中的这一行：

-webkit-appearance: none;

在input, button, select, textarea的样式规则中input, button, select, textarea你会遇到一些input, button, select, textarea 。

Answer 3

您已经定义了样式规则：

-webkit-appearance: none;

为input, button, select, textarea ，你必须删除它才能工作。

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

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

将复选框的值设置为 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类来解决这个问题