Style and appearance in Angular Query builder component

26 Feb 20261 minute to read

Customize the Query Builder’s appearance by overriding default CSS classes or creating a custom theme. The following table lists the primary CSS classes and their purposes. For advanced customization, use the Theme Studio to create and download custom themes.

CSS Class	Purpose of Class
.e-group-header .e-btn	To customize the condition button in querybuilder
.e-group-body .e-rule-container	To customize the querybuilder rule container
.e-group-container .e-group-header .e-dropdown-btn	To customize the querybuilder Add group/condition button
.e-query-builder .e-group-header .e-deletegroup	To customize the querybuilder Delete group button
.e-query-builder .e-rule-field .e-rule-value-delete .e-rule-delete	To customize the querybuilder Delete condition button
.e-query-builder .e-rule-list > ::after,.e-query-builder .e-rule-list > ::before	To customize the querybuilder group joining line
.e-query-builder .e-rule-container.e-joined-rule	To customize the querybuilder condition joining line