html - 在 Chrome 32 中悬停时未突出显示复选框

Question

当我将鼠标悬停在 Firefox 或 IE 中的复选框或它的标签上时，复选框会进入活动状态并突出显示，表示单击会影响它。然而，这对我来说似乎并不适用。

这是一些非常非常简单的代码：

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

这是一个尝试的小提琴

以下是复选框如何在所有浏览器中呈现的示例：

我正在使用 chrome 32.0.1700.76 m

• 这是其他人在使用 chrome 时遇到的问题吗？
• 如果其他人没有这个问题，任何可能导致它的想法（扩展，添加）
• 这实际上是 chrome 选择呈现复选框的方式吗？
  • 如果是这样，是否有跨浏览器一致性的解决方法？

Answer 1

由于显然 chrome 这样做是为了摆脱本机控件，因此这是一种更改 chrome 中默认行为的方法。

• 使用 CSS属性选择器input来定位[type=checkbox]
• 悬停时使用 CSS:hover伪类有条件地应用值
• 使用 Chrome供应商前缀仅针对-webkit-浏览器^†</sup>
• Style with Box-Shadow, 使用inset选项使阴影向内

添加这个CSS：

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

这是 Fiddle 的演示

这是一个例子*：

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

Answer 2

Chrome's new rendering has quite a few UI changes.

Just use a simple CSS pseudo-class to fix it.

Fiddle: http://jsfiddle.net/4bpbr/3/

HTML

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

CSS

input:hover {
    background:#CCC;
}