Contains public sector information licensed under the Open Government Licence v3.0. This content was originally published at https://gdstechnology.blog.gov.uk/2015/08/27/making-radio-buttons-and-checkboxes-easier-to-use/.

Making radio buttons and checkboxes easier to use

At GDS we’re always looking for ways to make our pages easier for anyone to use. One particular area that comes up in user research is the difficulty people have with clicking on small checkboxes or radio buttons in forms. Our standard library of form elements does contain them in a clickable grey box, but because the relation between the label and the control has to be manually coded, every website that doesn’t do this trains people to only click directly on the control. It would be nice if we could adjust the size of checkboxes and radio buttons to make them larger where appropriate.

A while ago, Roger Johansson wrote a set of articles where he investigated how form controls could be styled. This highlighted some difficulties in resizing radio buttons and checkboxes. I was interested in whether anything had changed since this was written.

Generally when you find a set of visual differences between browsers the first place to turn is the specifications. Somewhat unhelpfully though, CSS2.1 has this to say about form styling:

CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental.

I’d like to say that things have changed since CSS2.1 was published, but there’s precious little in CSS3 beyond very basic layout hints.

If the specifications don’t tell browsers what to do, maybe they’ve settled on an unofficial standard between themselves? I put together a quick test page with radio buttons and checkboxes set to varying different sizes and ran it through a set of browsers to see what they made of it. With evergreen browsers I only tested the latest version. The results are in the following table if you want a more detailed view each image links to the full size version.

Browser Result
Chrome on Windows 7 Sized and crisp
Chrome on Windows 8.1 Sized and crisp
Chrome on Windows 10 Sized and crisp
Firefox on Windows 7 No change in rendered size
Firefox on Windows 8.1 No change in rendered size
Firefox on Windows 10 No change in rendered size
Opera on Windows 7 No change in rendered size
Opera on Windows 8.1 No change in rendered size
Opera on Windows 10 Sized and crisp
Internet Explorer 7 on Windows XP Sized, but pixellated or blurry
Internet Explorer 8 on Windows 7 No change in rendered size
Internet Explorer 9 on Windows 7 Sized, but pixellated or blurry
Internet Explorer 10 on Windows 8 Sized and crisp
Internet Explorer 11 on Windows 10 Sized and crisp
Edge on Windows 10 Sized and crisp
Chrome on OS X 10.10 No change in rendered size
Firefox on OS X 10.10 Sized, but pixellated or blurry
Opera on OS X 10.10 No change in rendered size
Safari on OS X 10.10 No change in rendered size
Safari on OS X 10.11 No change in rendered size
Chrome on Android 4.4 Sized and crisp
Chrome on Android 5.1 Sized and crisp
Safari on iOS 6 Sized and crisp
Safari on iOS 8.3 Sized and crisp
Internet Explorer on Windows Mobile 8.1 Sized and crisp
FirefoxOS 2.2 Sized and crisp

These results fell broadly into three different categories.

No change in rendered size

Sized, but pixellated or blurry

Sized and crisp

There are some oddities with the above results that are worth mentioning.

The browsers that display no change in the size of the rendered button always create a blank space of the specified size and centre the input within it. Even if the size of the control isn’t changing you can rely on the rest of your content being laid out consistently.

The WebKit (and Blink) based browsers on OS X do resize in one case: they’ll drop to a smaller checkbox or radio button when set to below 14 pixels wide and high.

Safari on iOS has set the corner radius of radio buttons to a fixed number of pixels. When you increase the overall size of the control the corners stay at the same radius, which makes the control look progressively more square. Even at 50px × 50px it’s distinguishable from a checkbox, but this feels like an issue that could be easily fixed.

Opera on Windows 10 for some reason uses Windows Classic themed controls. It doesn’t look awful and it does resize up nicely at least, but given that the default Windows 10 controls look really good at any resolution I’d suggest this could be changed easily.

Where does this leave us?

The mobile browsers I tested have the least problems: perhaps due to the nature of a zoomable interface by default they all use vectors that scale nicely. On desktop, support for resizing is difficult to untangle. Browsers on Windows 10 (apart from Firefox) generally do a nice job which is positive for future development, but on OS X it’s completely the opposite with only Firefox supporting resizing (and even then blurring the resized controls).

If we want even basic support for resizing radio buttons and checkboxes on desktop, we'll need to speak to the browser development community to have a better understanding on what’s feasible and sensible.