Cool CSS radio buttons and checkboxes

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

The HTML
Pretty much standard, and what you'd expect.
HTML
The CSS
That'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

The HTML
Again, standard checkbox stuff.
HTML
The CSS
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.
Disabled radio buttons and checkboxes
The CSS
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+.
More from Tipue

Tipue Slide, a Sliding Panel Site Search jQuery Plugin

Tipue Slide is a sliding panel site search jQuery plugin. It's free, open source and fast. Tipue Slide only needs a browser that supports jQuery.
More >

A Very Simple CSS Background Zoom

An easy method of creating a CSS background image zoom.

More >