--- title: "Legacy Themes: Customising Inputs & Widgets" framework: javascript version: "36.1.0" --- # Legacy Themes: Customising Inputs & Widgets Style text inputs, checkboxes, toggle buttons and range sliders. > **Note** > > This page describes the grid's legacy theming system that was the default in v32 and before, for the benefit of applications that have not yet migrated to the Theming API. These themes are deprecated and will be removed in a future major version. You may want to visit the [new theming docs](https://www.ag-grid.com/javascript-data-grid/theming-widgets/) or check out the [migration guide](https://www.ag-grid.com/javascript-data-grid/theming-migration/). ## Styling Text Inputs Text inputs can be styled with a combination of CSS variables and selectors: ```css .ag-theme-quartz { --ag-borders-input: dotted 2px; --ag-input-border-color: orange; } .ag-theme-quartz .ag-text-field-input { background-color: rgb(255, 209, 123); /* light orange */ } .ag-theme-quartz .ag-text-field-input::placeholder { color: rgb(155, 101, 1); /* darker orange */ } ``` #### Text Input Styling ```ts import "ag-grid-community/styles/ag-grid.css"; import "ag-grid-community/styles/ag-theme-quartz.css"; import { ClientSideRowModelModule, ColDef, GridApi, GridOptions, ModuleRegistry, NumberEditorModule, NumberFilterModule, TextEditorModule, createGrid, enableDevValidations, } from "ag-grid-community"; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, FiltersToolPanelModule, PivotModule, RowGroupingModule, SetFilterModule, } from "ag-grid-enterprise"; import { IOlympicData } from "./interfaces"; // Enable extended validations only for development if (process.env.NODE_ENV !== "production") { enableDevValidations(); } ModuleRegistry.registerModules([ NumberEditorModule, TextEditorModule, NumberFilterModule, ClientSideRowModelModule, ColumnsToolPanelModule, FiltersToolPanelModule, ColumnMenuModule, ContextMenuModule, RowGroupingModule, SetFilterModule, PivotModule, ]); const columnDefs: ColDef[] = [ { field: "athlete", minWidth: 170 }, { field: "age" }, { field: "country" }, { field: "year" }, { field: "date" }, { field: "sport" }, { field: "gold" }, { field: "silver" }, { field: "bronze" }, { field: "total" }, ]; let gridApi: GridApi; const gridOptions: GridOptions = { theme: "legacy", columnDefs: columnDefs, defaultColDef: { editable: true, filter: true, enableRowGroup: true, enablePivot: true, enableValue: true, }, sideBar: true, }; const gridDiv = document.querySelector("#myGrid")!; gridApi = createGrid(gridDiv, gridOptions); fetch("https://www.ag-grid.com/example-assets/olympic-winners.json") .then((response) => response.json()) .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data)); ``` [Live example: Text Input Styling](https://www.ag-grid.com/examples/theming-v32-customisation-widgets/text-inputs/typescript) The CSS variables relevant to styling text inputs are: | Property | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `--ag-borders-input` | `a CSS border style and size (e.g. `solid 1px` or `none`)` | | | Draw borders around inputs. Set this to a border style and thickness, e.g. `solid 1px` to enable borders, or `none` to disable borders. | | `--ag-input-border-color` | `CSS color (e.g. `red` or `#fff`)` | | | Colour for borders around inputs, if enabled with --ag-borders-input | | `--ag-borders-input-invalid` | `a CSS border style and size (e.g. `solid 1px` or `none`)` | | | Draw borders around inputs when their content has failed validation. Set this to a border style and thickness, e.g. `solid 2px` to enable borders. Set to `none` to disable borders but ensure that you have added styles to differentiate invalid from valid inputs. | | `--ag-input-border-color-invalid` | `CSS color (e.g. `red` or `#fff`)` | | | The color for the border around invalid inputs, if enabled with --ag-borders-input-invalid | | `--ag-full-row-invalid-background-color` | `CSS color (e.g. `red` or `#fff`)` | | | The background color for a row with invalid editor status | | `--ag-invalid-color` | `CSS color (e.g. `red` or `#fff`)` | | | The color applied to form elements in an invalid state | | `--ag-input-disabled-border-color` | `CSS color (e.g. `red` or `#fff`)` | | | The border around disabled text inputs | | `--ag-input-disabled-background-color` | `CSS color (e.g. `red` or `#fff`)` | | | The background colour of disabled text inputs | | `--ag-input-focus-box-shadow` | `CSS box-shadow value (e.g. `0 5px 10px black`)` | | | box shadow around focussed inputs | | `--ag-input-focus-border-color` | `CSS color (e.g. `red` or `#fff`)` | | | Colour of the border around focussed inputs. Set to `var(--ag-input-border-color)` if you do not want to change the border colour on focus. | ## Styling Checkboxes The default styles of the grid disable the browser's native checkbox widget and create a custom appearance using icon fonts (see below for how to disable this). See the [Custom Icons](https://www.ag-grid.com/javascript-data-grid/custom-icons/) documentation for how to replace the checkbox icons - the icons used are `checkbox-checked`, `checkbox-unchecked`, `checkbox-indeterminate`. The colours can be controlled using the following CSS Variables: ```css .ag-theme-quartz { --ag-checkbox-background-color: yellow; --ag-checkbox-checked-color: red; --ag-checkbox-unchecked-color: darkred; --ag-checkbox-indeterminate-color: grey; } ``` #### Checkbox Styling ```ts import "ag-grid-community/styles/ag-grid.css"; import "ag-grid-community/styles/ag-theme-quartz.css"; import { ClientSideRowModelModule, ColDef, GridApi, GridOptions, ModuleRegistry, NumberEditorModule, NumberFilterModule, TextEditorModule, createGrid, enableDevValidations, } from "ag-grid-community"; import { ColumnMenuModule, ColumnsToolPanelModule, ContextMenuModule, FiltersToolPanelModule, PivotModule, RowGroupingModule, SetFilterModule, } from "ag-grid-enterprise"; import { IOlympicData } from "./interfaces"; // Enable extended validations only for development if (process.env.NODE_ENV !== "production") { enableDevValidations(); } ModuleRegistry.registerModules([ NumberEditorModule, TextEditorModule, NumberFilterModule, ClientSideRowModelModule, ColumnsToolPanelModule, FiltersToolPanelModule, ColumnMenuModule, ContextMenuModule, RowGroupingModule, SetFilterModule, PivotModule, ]); const columnDefs: ColDef[] = [ { field: "athlete", hide: true }, { field: "age", hide: true }, { field: "country", hide: true }, { field: "year" }, { field: "date" }, { field: "sport" }, { field: "gold" }, { field: "silver" }, { field: "bronze" }, { field: "total" }, ]; let gridApi: GridApi; const gridOptions: GridOptions = { theme: "legacy", columnDefs: columnDefs, defaultColDef: { editable: true, filter: true, enableRowGroup: true, enablePivot: true, enableValue: true, }, sideBar: true, }; const gridDiv = document.querySelector("#myGrid")!; gridApi = createGrid(gridDiv, gridOptions); fetch("https://www.ag-grid.com/example-assets/olympic-winners.json") .then((response) => response.json()) .then((data: IOlympicData[]) => gridApi!.setGridOption("rowData", data)); ``` [Live example: Checkbox Styling](https://www.ag-grid.com/examples/theming-v32-customisation-widgets/checkboxes/typescript) ### Styling Radio Buttons Radio Buttons, such as those in the chart settings UI, are specialised checkboxes. They respond to the same colour variables as demonstrated above. They use the `radio-button-on` and `radio-button-off` icons. ### Styling Toggle Buttons Toggle Buttons, such as the "Pivot Mode" toggle in the above example, are specialised checkboxes. They respond to the same checkbox colour variables. In addition, they expose a few more variables for advanced customisation: | Property | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `--ag-toggle-button-border-width` | `CSS length (e.g. `0`, `4px` or `50%`)` | | | size of the toggle button outer border | | `--ag-toggle-button-on-border-color` | `CSS color (e.g. `red` or `#fff`)` | | | colour of the toggle button outer border in its 'on' state | | `--ag-toggle-button-off-border-color` | `CSS color (e.g. `red` or `#fff`)` | | | colour of the toggle button's outer border in its 'off' state | | `--ag-toggle-button-on-background-color` | `CSS color (e.g. `red` or `#fff`)` | | | colour of the toggle button background in its 'on' state | | `--ag-toggle-button-off-background-color` | `CSS color (e.g. `red` or `#fff`)` | | | colour of the toggle button background in its 'off' state | | `--ag-toggle-button-switch-background-color` | `CSS color (e.g. `red` or `#fff`)` | | | colour of the toggle button switch (the bit that slides from left to right) | | `--ag-toggle-button-switch-border-color` | `CSS color (e.g. `red` or `#fff`)` | | | border colour of the toggle button switch (the bit that slides from left to right) | | `--ag-toggle-button-width` | `CSS length (e.g. `0`, `4px` or `50%`)` | | | width of the whole toggle button component | | `--ag-toggle-button-height` | `CSS length (e.g. `0`, `4px` or `50%`)` | | | height of the whole toggle button component | ## Using Browser Native Checkboxes or Creating Your Own The default styles in `ag-grid.css` contain many CSS rules to implement the `--ag-checkbox-*` and `--ag-toggle-button-*` variables described above. If you want to use the browser's default UI or create your own then it's easier to start from a blank slate rather than attempting to override the default styles. To achieve this, use the `ag-grid-no-native-widgets.css` CSS file instead of `ag-grid.css`. Users of the Sass API can pass `suppress-native-widget-styling: true` to accomplish this.