How to style a checkbox using CSS

Question

I am trying to style a checkbox using the following:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

But the style is not applied. The checkbox still displays its default style. How do I give it the specified style?

Answer 1

1. Add focus outline input[type="checkbox"]:focus + span:before { outline: 1px dotted #aaa; } ...
2. Set gray color for disabled checkbox input[type="checkbox"]:disabled + span { color: #999; }
3. Set hover shadow on non-disabled checkbox input[type="checkbox"]:not(:disabled) + span:hover:before { text-shadow: 0 1px 2px #77F; }