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

Question

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

score 40 · Accepted Answer

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

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

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

现在它工作正常。

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

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

score 31 · Accepted Answer

CSS 中的这一行：

-webkit-appearance: none;

在风格规则中，input, button, select, textarea为你打破了一切。

score 5 · Accepted Answer

您已定义样式规则：

-webkit-appearance: none;

为定义input, button, select, textarea，您必须将其删除并且可以工作。

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

score 2 · Accepted Answer

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

score 1 · Accepted Answer

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

score 0 · Accepted Answer

0

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

于 2020-09-11T08:40:09.303 回答

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

0

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

value="true"

于 2017-03-16T02:44:04.777 回答

score 0 · Accepted Answer

0

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

它只是解决了我的问题

于 2020-08-24T14:57:42.470 回答

10 回答 10