Working off the article found here, I’ve created a quick example of pure css-html styled radio buttons.
The linked article does fine for creating the style, but setting the radio button to display: none, prevents the radio group from being able to gain focus. As such your website will suffer some in the usability department.
As before we start with a radio group, for this example I’ve put them in a list.
Additionally you’ll notice that I’ve included two spans, the second span is used to create the dot in the middle of the radio button.
And now for some style.
First we position the list relatively, and hide the radio button by making transparent and positioning it absolutely (opacity: 0; position: absolute;). This hides it in the top left corner of every list item making sure the document scrolls to the proper location when the button gain focus - a pleasant bonus of this approach is it doesn’t mess with your layout of the span and label.
Next we make use of the + operator and the :focus and :checked selectors to style the span nodes we’ve included with our label.
And there you have it, a pure css + html styled radio button that answers to tab / arrow events. A working example can be found here. To see the focus effect you must first click in the output window to focus the iframe.