Styles and Appearances in Blazor QueryBuilder Component

14 Nov 20221 minute to read

To modify the QueryBuilder appearance, you need to override the default CSS of QueryBuilder component. Find the list of CSS classes and its corresponding section in QueryBuilder component. Also, you have an option to create your own custom theme for the controls using our Theme Studio.

CSS Class	Purpose of Class
.e-query-builder .e-btn-group input + label.e-btn	To customize the condition button in querybuilder.
.e-query-builder .e-btn-group input:checked + label.e-btn	To customize the selected condition button in querybuilder.
.e-query-builder .e-group-body .e-rule-container	To customize the querybuilder rule container.
.e-query-builder .e-group-action .e-btn	To customize the querybuilder add group/condition button.
.e-query-builder .e-removerule.e-btn.e-round	To customize the querybuilder Delete 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.