html - How to style a checkbox using CSS? -

i trying style checkbox using following:

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

but style not applied. checkbox still displays default style. how give specified style?

update: below answer references state of things before widespread availability of css3. in modern browsers (including internet explorer 9 , later) more straightforward create checkbox replacements preferred styling, without using javascript.

here useful links:

• creating custom form checkboxes css
• easy css checkbox generator
• stuff can checkbox hack
• implementing custom checkboxes , radio buttons css3
• how style checkbox css

it worth noting fundamental issue has not changed. still can't apply styles (borders, etc.) directly checkbox element , have styles affect display of html checkbox. has changed, however, it's possible hide actual checkbox , replace styled element of own, using nothing css. in particular, because css has supported :checked selector, can make replacement correctly reflect checked status of box.

---

older answer

here's a useful article styling checkboxes. writer found varies tremendously browser browser, , many browsers display default checkbox no matter how style it. there isn't easy way.

it's not hard imagine workaround use javascript overlay image on checkbox , have clicks on image cause real checkbox checked. users without javascript see default checkbox.

edited add: here's a nice script you; hides real checkbox element, replaces styled span, , redirects click events.