Varying Sizes of Radio Buttons

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:

  1. You can size a radio button simply with width and height
  2. 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.



I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen PRO

2 responses to “Varying Sizes of Radio Buttons”

  1. Dan says:

    Regarding the visual appearance (not the technical implementation): isn’t this design somewhat manipulative, and bound to skew test results? The varying sizes might imply to some participants that certain options are “worth more”, or “the better choice”.

    • Chris Coyier says:

      Maybe? I suppose you could test it against different designs somehow to see if it seemed to skew data. But personality tests are bullshit anyway so meh.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️