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