DocuSign Dev Blog

Brought to you by the development teams at DocuSign

Posts by Azat Mardanov

Azat Mardanov
Azat Mardanov
Twitter:  @azat_co
Github:  azat-co

Custom Scalable CSS Radio Buttons

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:

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).

more »