user1048676 user1048676 - 1 year ago 82
CSS Question

CSS -webkit-appearance: none; is causing checkbox to not be checked

I have a checkbox that I applied the following CSS style to:

-webkit-appearance: none;

This same code is on some text fields I have and these still continue to work just fine. Why is this functionality causing the checkbox to not allowed to be checked?

I like the styling of the checkbox this way but still need the functionality to work. If I change the code to:

-webkit-appearance: checkbox;

It displays the standard checkbox. Any ideas? Here is a JS Fiddle for demonstration purposes:

Answer Source

You just nuked all styles of checkbox on WebKit, so yes you can't see whether they're checked or not (they still are, it just isn't visible to us sighted people without a screen reader).

You need to style the checked state with the :checked pseudo:

input[type=checkbox]:checked {
    background-color: red;
    /* or whatever styles you want depending on your design */
    /* be as obvious as possible that it's a checkbox and that it's checked! */