Search code examples
htmlcssgoogle-chromewebpage-rendering

Checkbox not highlighted on hover in Chrome 32

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

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