Can I set checkbox :focus appearance with CSS?

I have

input:focus, select:focus {
  background: #ffffcc;
}

to set a soft yellow background in the current input element but it has no effect on checkboxes. I’ve tried

input[type="checkbox"]:focus {
  border-color: #ffffcc;
}

but that didn’t work either. I’m looking at this page in Firefox 2.0 but I’d prefer a solution that worked in FF, IE, and Opera. Whatever I do with CSS the background for the checkbox remains white. Any help appreciated. Thanks.

Hi,

The simple fact is that form elements only allow partial styling at the best of times and if the styling isn’t showing then its 99% certain that it isn’t implemented in that browser.

You can change the checkbox background in opera but not in Firefox. Firefox will take an outline on focus though.


input:focus {
  background: #ffffcc;
    outline:5px solid #ffffcc;
}

IE however won’t do anything on focus although you can color the background in the normal state (depending on element).

See here for more information.