Custom Crossbrowser Styling for Checkboxes and Radio Buttons

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

This solution is outdated. You can find the newest one on this page. Find more experiments here.

More Cool Stuff



  1. Great hack, just what I needed. well, I did tweak it a bit for my needs, Thanks for the help. I assume this is free to use, nevertheless,I’ll ask, Can I use this in my website? also if you have any guidelines in using your hack? Very much appreciated. Thanks, Ira.

  2. Great! I spent 5 days looking for cross browser custom radios. But I am having a problem with it though. I want to indent the label text 20px from the image.

    .skinned-form-controls label span{

    The result is the whole thing is indented including the icons. However, the indention works on the fallback for old browser only. As many of us know, the fallback will not load the sprite so it is useless. How can I make the indention work for the new browsers?



Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s