Style and appearance in EJ2 TypeScript Query Builder UI
04 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 |