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 Search, a jQuery Site Search Plugin

Tipue Search is a site search jQuery plugin. It's free, open source, responsive and fast. Tipue Search only needs a browser that supports jQuery.
More

A Responsive Text Input Form Field

When most people want a responsive text input form field they wrap it in a div. There's a more concise way.

More