Home
Products
Grids
Blog
Support
Donate
About
   

Cool CSS radio buttons and checkboxes

Hip and easy radio button and checkbox form elements styled with CSS.

Radio buttons


HTML
There's a lot of CSS, but most of it is obvious.
CSS
Giving the -webkit-appearance, -moz-appearance and appearance properties a none value removes the browser's native UI design and allows you to style your own.

The content value is a Unicode hexadecimal font character rotated via the transform property to look like a check. Unicode values in content should be escaped with a backslash. We're used Open Sans in this example but you can use most fonts.

Checkboxes


HTML
The same CSS as the radio button above, except the Checkbox has a border-radius value of 3px while the Round Checkbox has the original border-radius value of 50px.
CSS

Disabled radio buttons and checkboxes

Use the disabled attribute selector.
CSS
Everything above works with IE11, Edge 16+, Chrome 49+, Firefox 59+, Safari 11.1+, iOS Safari 10.3+, Chrome for Android 67+ and Samsung Internet 4+.
Before you go

For more articles like this, and to help us develop our open source plugins, we need your help. Please donate.

Donate
Latest & featured