Change with CSS the default "checkbox"

Question

I would like to change the default checkbox on my site to look like the Mozilla Firefox checkbox "http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/ff2-xp.png" .

Can please somebody help in order how to do this please?

I was thinking in doing this with the help of css....

-webkit-appearance: none;
background: url(checkbox_image_url_here);
width: 12px; height: 12px;

... Can I achieve something with this?

Hope somebody can help me. thank you everybody

Cheers Alex

John Riselvato · Accepted Answer · 2012-03-08 18:20:03Z

2

For a CSS only way of doing this, you'll be limiting yourself.

I suggest checking this link out for how to do it and here is a working version of it, for a CSS only solution. This only works on Safari and Chrome, unfortunately to get this working on other browsers, you'll need javascript of some sort.

answered Mar 8, 2012 at 18:20

John Riselvato

12.9k6 gold badges64 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change with CSS the default "checkbox"

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related