To help your [Editor add-on](https://developers.google.com/workspace/add-ons/concepts/types#editor_add-ons) look and feel like Google Sheets, Docs, Slides, or Forms, link in the CSS package following to apply Google styling to fonts, buttons, and form elements. For a sample of the CSS package in use, see the [Docs add-on quickstart](https://developers.google.com/workspace/add-ons/editors/docs/quickstart/translate). To use the CSS package, include the following at the top of each HTML file: Note that the style for form elements cannot be completely controlled in all browsers. In particular, ``, or ``, as well as ``. Buttons that are horizontally adjacent space themselves out automatically. There are several colors available, for various uses: | Use | Appearance | Markup with CSS package | |---|---|---| | Primary action | | ```css ``` | | Secondary action(s) | | ```css ``` | | Create action | | ```css ``` | | Share action | | ```css ``` | ## Checkboxes | Example | Markup with CSS package | |---|---| | | ```css
``` | ## Radio buttons | Example | Markup with CSS package | |---|---| | | ```css
``` | ## Select menus | Example | Markup with CSS package | |---|---| | | ```css
``` | ## Text areas | Example | Markup with CSS package | |---|---| | | ```css
``` | ## Text fields | Example | Markup with CSS package | |---|---| | | ```css
``` | ## Sidebars Sidebars can be tricky to style because while the height is variable, many add-ons need to include a branding area that does not scroll. The following is a copy of the sidebar from the [Google Docs add-on quickstart](https://developers.google.com/workspace/add-ons/translate-addon-sample). If you drag the bottom-right corner of the text area to make the content taller than the sidebar, the content area automatically scrolls but the branding at the bottom does not. The example uses the `sidebar` class to apply the correct padding and the `bottom` class to force the branding area to the bottom. A local class, `branding-below`, then defines the area that the main area of the sidebar should leave clear from the bottom. | Example | Markup with CSS package | |---|---| | | ```css
Translate sample by Google
``` |