Styling Inputs and Widgets

Style text inputs, checkboxes, toggle buttons and range sliders.

Styling Text Inputs

Text inputs can be styled with a combination of CSS variables and selectors:

.ag-theme-alpine {
    --ag-borders-input: dashed 2px !important;
    --ag-input-border-color: red !important;
}

.ag-theme-alpine .ag-text-field-input {
    background-image: linear-gradient(to right, white, #fc8d62) !important;
}

.ag-theme-alpine .ag-text-field-input::placeholder {
    color: red !important;
    font-weight: bold;
}

The following example shows the result using the CSS style defined above. Note that the grid is editable, try to modify
a cell to see how the style is also applied. You can also see the result on the menu of the columns.

The CSS variables relevant to styling text inputs are:

Styling Checkboxes

The default styles of the grid disable the browser’s native checkbox widget and create a custom appearance using icon
fonts.

See the Custom Icons at Global Level documentation for
how to replace the checkbox icons - the icons used
are checkbox-checked, checkbox-unchecked, checkbox-indeterminate.

The colors can be controlled using the following CSS Variables:

.ag-theme-alpine {
    --ag-checkbox-background-color: rgb(209, 255, 123) !important;
    --ag-checkbox-checked-color: #66c2a5 !important;
    --ag-checkbox-unchecked-color: darkred !important;
    --ag-checkbox-indeterminate-color: #fc8d62 !important;
}

Styling Radio Buttons

Radio Buttons, such as those in the chart settings UI, are specialised checkboxes. They respond to the same color
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 color variables. In addition, they expose a few more variables for advanced customisation:

<br>