Radio buttons are essential when building forms and dialogs. Sadly enough, there are limited options for styling them. Developers might use one of the following methods to a certain degree of success:
- width and height: unreliable
- transform scale: not scaling more than certain size
- images: can’t scale graciously and can’t have gradients
However, at DocuSign we have a very specific requirement — the user needs to be able to “zoom in” on the document and the radio buttons need to get bigger.
We call this “scalable” css buttons, because we need many things to increase in size as we “zoom in” (such as the border thickness).
We use CSS to re-draw the default HTML radio buttons. We did it by hiding the default
<input> field, using
<label>s with the
for attribute and a nested div with
border-radius. This way developers can control radio buttons to a pixel (presumably with server-side or front-end width/top/left manipulation).