Checkbox not highlighted on hover in Chrome 32

Question

When I hover over a checkbox or it's label in Firefox or IE, the checkbox enters an active state where it is highlighted, indicating that a click will affect it. However this doesn't appear to be working chrome for me.

Here's some very, very simple code:

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

Here's a fiddle to try out

Here's an example of how checkboxes are rendering in all browsers:

I'm using chrome 32.0.1700.76 m

• Is this an issue other people are having with chrome?
• If other people aren't having this issue, any ideas what could be causing it (extension, add on)
• Is this actually the way chrome chooses to render checkboxes?
  • If so, are there any workarounds for cross browser consistency?

Answer 1

Since apparently chrome is doing this intentionally to move away from native controls, here's a way to change the default behavior in chrome.

• Use the CSS Attribute Selector to target input with [type=checkbox]
• Use the CSS :hover pseudo-class to conditionally apply values when hovering
• Use the Chrome Vendor Prefix to only target -webkit- browsers^†
• Style with Box-Shadow, using the inset option so the shadow goes inwards

Add this CSS:

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

Here's a Demo in Fiddle

Here's an example*:

†The webkit prefix will also apply to safari browsers
**There have been prettier things in the world, but I'd still rather have this than nothing*

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;
}