在 Chrome 32 中悬停时未突出显示复选框答案

【问题标题】：Checkbox not highlighted on hover in Chrome 32在 Chrome 32 中悬停时未突出显示复选框
【发布时间】：2014-01-28 07:46:12
【问题描述】：

当我将鼠标悬停在 Firefox 或 IE 中的复选框或其标签上时，该复选框会进入活动状态并突出显示，表示单击会对其产生影响。但是，这似乎不适用于我的 chrome。

这里有一些非常非常简单的代码：

<label>
    <input type="checkbox"/>
    Sample Check Label
</label>

Here's a fiddle to try out

这是一个复选框如何在所有浏览器中呈现的示例：

我正在使用 chrome 32.0.1700.76 m

【问题讨论】：

“这实际上是 chrome 选择呈现复选框的方式吗？” - 是的。
至少对我来说似乎是默认行为。我在这里没有看到问题 - 如果不确定，用户可以随时单击复选框本身，尽管仍然没有突出显示它
不幸的是，Chrome 已切换到非本地复选框（参见"Chrome 32 vs Windows"）。高亮效果很可能由 Windows 本身处理，因此不会出现在那些非本机复选框上（除非 Chrome 也尝试模仿 Windows 的默认行为）
在相关说明中，我讨厌 Chrome 32 的新滚动条。
@j08691，有一个app for that

【解决方案1】：

由于显然 chrome 正在这样做 intentionally 以摆脱原生控件，因此这是一种更改 chrome 中默认行为的方法。

添加这个 CSS：

input[type=checkbox]:hover {
    -webkit-box-shadow: inset 0 0 2px 2px rgba(82,168,236,.6);
}

这是一个示例*：

†webkit 前缀也适用于 safari 浏览器
**世界上本来就有更漂亮的东西，但我还是宁愿拥有它也不愿什么都没有*

【讨论】：

【解决方案2】：

Chrome 的新渲染有不少 UI 变化。

只需使用简单的 CSS pseudo-class 即可修复它。

HTML

<label>
    <input type="checkbox"/>
    Sample Check Label
</label>

CSS

input:hover {
    background:#CCC;
}

【讨论】：