CSS -webkit-appearance: none; prohibits checkbox

Question

That's it. I have a checkbox that I applied to the following CSS style:

-webkit-appearance: none; 

The same code is in some text fields that I have, and they still continue to work fine. Why does this function prevent checkboxes from checking?

I like the style of this checkbox, but I still need the functionality. If I changed the code to:

 -webkit-appearance: checkbox; 

It displays a standard checkbox. Any ideas? Here is a JS script for demo purposes: http://jsfiddle.net/VWC76/

Answer 1

You just pasted all the flag styles on WebKit, so yes, you can’t see if they are checked or not (they are still there, we just don’t see it to sighted people without a screen reader).

You need to style the checked state with :checked pseudo: http://jsfiddle.net/VWC76/450/

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

EDIT:

• appearance:none now exists outside of WebKit / Blink ( caniuse ). Just use Autoprefixer if you would rather do than add prefixes manually :)
• Good Implementation: Available Custom Flags and Radio Format Controls

EDIT 2:

• in the demonstration of the script, adding focus elements before and after the checkbox to show that it works with the keyboard (just click on the first appearance of “Test” and then on the tab tab tab). It has no visual cue that focuses on the checkbox / shortcut, which is bad (this is a demo). It’s best to look at Chrome, which is worse: p (you need Autoprefixer. Try Codepen)

Answer 2

You need to add the input [type = checkbox]: checked

 input[type=checkbox]:checked { background: #BADA55; } 

If this is what you are looking for?

Answer 3

Disabling the appearance also removes the verified appearance. You also need to add styles to determine how the checkbox will appear if it is checked.

 input[type='checkbox']:checked { position:relative; } input[type='checkbox']:checked:before { content:''; display:block; width:17px; height:16px; position:absolute; top:1px; left:1px; background:none #ACACB8; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; opacity:0.5; } 

Check out the sample scripts below:

http://jsfiddle.net/8n8hM/

Answer 4

The best way to personalize the checkbox or radio button that works across browsers is to use the label set for this checkbox . In your css, you hide your checkbox and add whatever style you want for the label.

 input[type='checkbox'] { outline: 0; user-select: none; display: inline-block; position: absolute; opacity: 0; } input[type='checkbox'] + label { display:inline-block; width:20px; height:20px; background-color:blue } input[type='checkbox']:checked + label { background-color:red } 

 <input id="myChk" type="checkbox" /> <label for="myChk">&nbsp</label> 

See this jsfiddle .