It’s possible to get one size bigger by tricking Safari into using the @2x radio image using transform:scale(2), but this only seems to work on non-retina machines (see Lea Verou’s bug #58524).
It would be great to be able to resize radios and checkboxes to fit the text around them. Our workaround is to handroll custom inputs, but these require extra maintenance and only work for us rather than the whole development community. Is Webkit on OS X tied to raster inputs, and if so is there work in progress to update these to vectors and unlock the size?
It’s worth pointing out that Windows (desktop and mobile), Android and iOS all have vector widgets for checkboxes and radios; OS X is lagging here.
Upstream bug: https://bugs.webkit.org/show_bug.cgi?id=148675 Date: 2015-09-01 Reported by: Robin Whittleton (@robinwhittleton)
Overview
[Robin] did some research on how radios and checkboxes resize in various browsers: https://gdstechnology.blog.gov.uk/2015/08/27/making-radio-buttons-and-checkboxes-easier-to-use/
It appears that on OS X by default radios and checkboxes are fixed to either a normal or a small size (<14px). Screenshots:
Safari 8: https://gdstechnology.blog.gov.uk/wp-content/uploads/sites/31/2015/08/osx_10.10_safari.png Safari 9: https://gdstechnology.blog.gov.uk/wp-content/uploads/sites/31/2015/08/osx_10.11_safari.png Chrome: https://gdstechnology.blog.gov.uk/wp-content/uploads/sites/31/2015/08/osx_10.10_chrome.png
Firefox makes an attempt to resize if requested but looks blurry, presumably because it’s only using the one raster image:
https://gdstechnology.blog.gov.uk/wp-content/uploads/sites/31/2015/08/osx_10.10_firefox.png
It’s possible to get one size bigger by tricking Safari into using the @2x radio image using transform:scale(2), but this only seems to work on non-retina machines (see Lea Verou’s bug #58524).
It would be great to be able to resize radios and checkboxes to fit the text around them. Our workaround is to handroll custom inputs, but these require extra maintenance and only work for us rather than the whole development community. Is Webkit on OS X tied to raster inputs, and if so is there work in progress to update these to vectors and unlock the size?
It’s worth pointing out that Windows (desktop and mobile), Android and iOS all have vector widgets for checkboxes and radios; OS X is lagging here.