Style and appearance in EJ2 TypeScript Query Builder UI
4 Sep 20261 minute to read
To modify the Query Builder appearance, override the default CSS classes. The following table lists the primary CSS selectors and the sections they affect. A custom theme for the controls can also be created with Theme Studio.
| CSS Class | Purpose of Class |
|---|---|
| .e-group-header .e-btn | Customizes the condition button |
| .e-group-body .e-rule-container | Customizes the rule container |
| .e-group-container .e-group-header .e-dropdown-btn | Customizes the Add Group/Condition button |
| .e-query-builder .e-group-header .e-deletegroup | Customizes the Delete group button |
| .e-query-builder .e-rule-field .e-rule-value-delete .e-rule-delete | Customizes the Delete condition button |
| .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before | Customizes the group joining line |
| .e-query-builder .e-rule-container.e-joined-rule | Customizes the condition joining line |