Checkbox not highlighted on hover in Chrome 32

1.6k views Asked by At

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:

screenshots

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?
2

There are 2 answers

1
KyleMit On BEST ANSWER

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

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*:

screenshot

†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*

0
Nicholas Hazel On

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