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

Question

当我将鼠标悬停在Firefox或IE中的复选框或其标签上时，复选框会进入活动状态，突出显示该状态，表示点击会影响它。但是，对我来说，这似乎不起作用。

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

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

Here's a fiddle to try out

以下是所有浏览器中复选框的呈现方式示例：

我正在使用chrome 32.0.1700.76 m

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

Answer 1

由于显然chrome正在执行此intentionally以远离本机控件，因此这是一种更改chrome中默认行为的方法。

• 使用CSS Attribute Selector与input
定位[type=checkbox]
• 使用CSS :hover pseudo-class在悬停时有条件地应用值
• 使用Chrome Vendor Prefix仅定位-webkit-个浏览器^†
• 样式Box-Shadow，使用inset选项，以便阴影向内

添加此CSS：

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

Here's a Demo in Fiddle

这是示例* ：

†webkit前缀也适用于safari浏览器
**世界上有更漂亮的东西，但我仍然宁愿拥有这个而不是*

Answer 2

Chrome的新渲染有很多用户界面更改。

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

小提琴：http://jsfiddle.net/4bpbr/3/

<强> HTML

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

<强> CSS

input:hover {
    background:#CCC;
}