Hip and easy radio button and checkbox form elements styled with CSS.
Pretty much standard, and what you'd expect.
That's a lot of CSS, but most of it is obvious.
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.
Again, standard checkbox stuff.
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
Use the disabled attribute selector.
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+.