复选框和下拉箭头在 chrome 中不可见答案

【问题标题】：Checkbox and dropdown arrows invisible in chrome复选框和下拉箭头在 chrome 中不可见
【发布时间】：2018-04-26 15:30:35
【问题描述】：

由于某种原因，我的复选框和下拉箭头在 chrome 中不可见，但它们仍然有效。

它们在 IE 中完全可见。当我在 IE 中加载页面，然后尝试在 chrome 中加载页面时，它们通常会出现，直到我在 chrome 中再次刷新页面。

有人知道问题出在哪里吗？

参考图片：http://i.imgur.com/Q66w6.png

【问题讨论】：

你有示例代码吗？
你能链接到页面，或者提供一些代码吗？
你在说什么下拉箭头？
这是一张参考图片。 i.imgur.com/Q66w6.png
我也有同样的问题。有解决方法吗？

标签： html google-chrome checkbox

【解决方案1】：

这个 Chrome 问题的“解决方案”是

打开任务管理器
在浏览器前打开任务管理器时刷新 Chrome 中的页面。

当我读到它时，我不敢相信这真的会奏效，但我亲眼看到了它。这个问题显然从 Chrome 的早期版本开始就存在，并且在当前版本中仍然存在，尽管它只是偶尔发生。在这个“修复”之后，它似乎永久消失了。

【讨论】：

是零星的。有时有效，有时无效。谷歌搜索“谷歌浏览器中缺少单选按钮”表明这是一个至少自 2008 年以来一直在出现的问题。

【解决方案2】：

在 webkit 浏览器中，以下代码将删除下拉箭头。

select{
  -webkit-appearance:none;
}

检查您的浏览器检查器将表明它是否已应用于您的案例。

【讨论】：

【解决方案3】：

遇到同样问题时发现了这个问题。

设置：

input {
   width:100%
}

对我来说是问题的原因。这个：

input[text] {
   width:100%
}

是我想要的（保持复选框宽度不变）——在 chrome 中设置复选框的宽度似乎会使它们消失。

【讨论】：

【解决方案4】：

正如 user48956 所说；将输入宽度设置为 100% 会导致复选框在 chrome 中消失。

我使用引导程序并且经常有表单，我希望所有输入都拉伸 100% 并且不想使用 bootstraps form methods，但这个问题仍然存在。

如果您定义了input {width:100%}，您可以在包含复选框的 div 上设置一个宽度，它会修复。例如

<div style="display:inline-block; width:20px"><input type="checkbox" name="read_privacy_policy" id="read_privacy_policy" class="pull-left"></div>
<div style="display:inline-block">I have read and understand the Privacy Policy.*</div>

或者您可以在输入本身上设置style="width:auto"

【讨论】：

【解决方案5】：

我遇到了同样的问题

试试这个css样式抑制所有在输入复选框元素中起作用的样式。

-webkit-appearance: checkbox!important;

【讨论】：

【解决方案6】：

我认为这是一个错误，它仍然存在。我在 ligthbox 窗口中使用复选框，但它们不显示。我在 OS-X 上使用 Chrome 21。

【讨论】：

这不会添加任何内容，甚至不会远程回答任何内容。支持这个问题会更好