CSS: Checkbox Styling - fill checkbox with color when checked

Question

I need to change the styling of my checkboxes. I have read many articles on this but what I am expecting is this: http://i.imgur.com/q2HdOJO.png
When checked, instead of the "check", the checkbox be filled with (in this case) blue color.

I am not sure if this is the "intermediate" state in Mac and thus looks different in my Ubuntu machine but how can I fill the checkbox with color?

Answer 1

Use images and bind click events with Javascript. It will be much easier than trying to use CSS. CSS will be impossible in some browsers that don't support the styling to hope to achieve.

Here is a related post: How to use images for check boxes using CSS or may be Javascript?

Answer 2

You can use the accent-color property in CSS:

#checkbox {
  accent-color: #00FFF0;
}