Vue Data Grid

Customising Inputs & Widgets

vue logo

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-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 */

The CSS variables relevant to styling text inputs are: