Varying Sizes of Radio Buttons Chris Coyier

August 30, 2023

When I was looking at what looks like the “official” online personality test for Meyers-Briggs when I was spouting off about personality tests, I noticed that their radio button choices were actually kinda cool:

I like how, visually, the larger radio buttons imply “more”.

I can’t 100% vouch for the accessibility of their solution, but at a glance, it seems OK. Visually, those circles are <span>s, but they are using proper <input type="radio"> elements where the arrow keys work and tabbing moves between groups of them and such. They even appear to have proper labels, like “I moderately agree“.

But — there was a smidge of extra engineering that had to happen here, like absolutely positioning the radio buttons and hiding them via opacity and such.

This wasn’t always true, but nowadays:

You can size a radio button simply with width and height

You can colorize the radios with accent-color.

So here’s basically the same thing with a bit less fancy-dancing:

Live demo:

That works in Chrome and Firefox and…

Aw dammit. No dice on Safari.

lol ok whatever — forget everything I said — they should just keep doing what they are doing.

🤘

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdgbXx0fI6vmKuxmaO0br%2FIs5ysZZ%2BberOtw6KmZpqlqcGwutJo

Related