Question

For some strange reason, IE7-9 make checkboxes and radiobuttons white when focused or hovered. Unfortunately, the website I’m working on only exists locally and is fairly new (less than one year), but I’ve managed to find another website where the same problem occurs.

When I go to that page and hover over the checkbox, the gray-ish background becomes white. However, on most websites with checkboxes and/or radiobuttons I get the desired and “normal” behaviour: a blue-ish hue. For radiobuttons the selected radiobutton becomes a black dot with white background instead of the standard blue dot and gray background.

Does anyone know why this happens and how I can fix it?

I’ve tried to disable all CSS- and JavaScript-files, but the problem still occurs.

In advance, thanks! 🙂

Answer 1

This is a known bug/feature – checkbox and radio background bleeds in IE7-9 whenever a non transparent background is set in CSS.
In the page you linked to, the input:hover background is set to #ffd in basic.css, line 93.

This has been reported as a bug in various projects, for example Twitter Bootstrap Issue 3181 or here.

The solution is to set the background to transparent:

.radio input[type="radio"], .checkbox input[type="checkbox"]{
   background-color:transparent;
}

You need to remove the background declaration from :hover states too.