关于 html:Checkbox 在 Chrome 32 中悬停时未突出显示


Checkbox not highlighted on hover in Chrome 32

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

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

1
2
3
4
<label>
    <input type="checkbox"/>
    Sample Check Label
</label>

这是一个可以尝试的小提琴

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

screenshots

我使用的是 chrome 32.0.1700.76 m

  • 这是其他人在使用 chrome 时遇到的问题吗？
  • 如果其他人没有这个问题，任何可能导致它的想法(扩展，添加)
  • 这实际上是 chrome 选择呈现复选框的方式吗？

    • 如果是这样，是否有跨浏览器一致性的解决方法？
相关讨论

显然 chrome 这样做是为了摆脱原生控件，这里有一种方法可以更改 chrome 中的默认行为。

  • 使用 CSS 属性选择器将 input 与 [type=checkbox] 定位
  • 使用 CSS :hover 伪类在悬停时有条件地应用值
  • 使用 Chrome vendor前缀仅针对 -webkit- 浏览器a€
  • 使用 Box-Shadow 样式，使用 inset 选项使阴影向内

添加此 CSS：

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

这是 Fiddle 中的演示

这是一个例子*：

screenshot

a€webkit 前缀也适用于 safari 浏览器
**世界上有更漂亮的东西，但我还是宁愿拥有这个而不是一无所有*

相关讨论

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

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

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

HTML

1
2
3
4
<label>
    <input type="checkbox"/>
    Sample Check Label
</label>

CSS

1
2
3
input:hover {
    background:#CCC;
}