Style and Appearance in Blazor Toolbar

27 Aug 20261 minute to read

This document provides CSS structures for modifying the control’s appearance based on user preference.

Customizing the Toolbar

Use the following CSS to customize the Blazor Toolbar.

.e-toolbar {
    border: 5px solid rgb(173, 255, 47);
}

Customizing the Toolbar Items

Use the following CSS to customize the items of the Blazor Toolbar.

 .e-toolbar .e-toolbar-item {
    background: #add8e6;
    border: 1px solid #5a70cc;
}

Use the following CSS to customize the button in the items of the Blazor Toolbar.

.e-toolbar .e-tbar-btn {
    background: #add8e6;
    border: 1px solid #5a70cc;
}

Customizing the Toolbar’s Item Icon

Use the following CSS to customize the item icon of the Blazor Toolbar control.

.e-toolbar .e-tbar-btn .e-icons {
    background: #185655;
    color: #d7f9d4;
}

Customizing the Hover State of the Blazor Toolbar

Use the following CSS to customize the Blazor toolbar item when hovering.

.e-toolbar .e-tbar-btn:hover {
    background: #c0e3a1;
    border: 1px solid green;
}

Customizing the Selected Item of the Blazor Toolbar

Use the following CSS to customize the selected toolbar item.

.e-toolbar .e-tbar-btn:focus {
    background: #add8e6;
    border: 1px solid #5a70cc;
}