在Chrome 32中，鼠标悬停时复选框未高亮显示

Question

3

当我在Firefox或IE中悬停复选框或其标签上时，复选框进入活动状态，高亮显示，表示单击将对其产生影响。但是在Chrome中似乎不起作用。

以下是一些非常简单的代码：

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

这里有一个jsfiddle示例

以下是复选框在各个浏览器中的渲染示例：

屏幕截图

我使用的是Chrome 32.0.1700.76 m版本。

- KyleMit

3

"这是否是Chrome选择呈现复选框的方式？" - 是。 - Adrift

对我来说，这似乎是默认行为。我在这里看不到问题 - 用户如果不确定，总是可以点击复选框本身，尽管这仍然不会突出显示它。 - Bojangles

不幸的是，Chrome已经转向非本地复选框（参见"Chrome 32 vs Windows"）。高亮效果很可能由Windows自身处理，因此在这些非本地复选框上不会出现（除非Chrome也试图模仿Windows的默认行为）。 - ComFreek

2

顺便提一下，我讨厌Chrome 32的新滚动条。 - j08691

@j08691，有一个应用程序可以解决这个问题。 - KyleMit

2个回答

0

Chrome的新渲染有很多UI变化。

只需使用一个简单的CSS pseudo-class 来解决它。

HTML

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

CSS

input:hover {
    background:#CCC;
}

- Nicholas Hazel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- KyleMit · Accepted Answer

显然，Chrome 有意为之这样做是为了远离本地控件，以下是在Chrome中更改默认行为的方法。

添加此CSS：

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

这是一个例子*：

screenshot

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