Style in EJ2 TypeScript Tab

4 Sep 20262 minutes to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on user preference.

Customizing Tab

Use the following CSS to customize the Tab.

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

Customizing the Tab items

Use the following CSS to customize the header items of Tab.

.e-tab .e-tab-header .e-toolbar-items {
    background: #9faed8;
    border: 2px solid blue;
}

Use the following CSS to customize the content items of Tab.

.e-tab .e-content .e-item {
    color: #a78515;
    font-size: 14px;
}

Customizing Tab’s header

Use the following CSS to customize the header of the Tab control.

.e-tab .e-tab-header {
    background: #badfba !important;
}

Customizing Tab’s header icon

Use the following CSS to customize the header item icon of the Tab control.

.e-tab .e-tab-header .e-toolbar-item .e-tab-icon {
    color: #badfba !important;
}

Customizing Tab’s content

Use the following CSS to customize the content of the Tab control.

.e-tab .e-content {
    background: #d1f6d1 !important;
}

Customizing the hover state of Tab control

Use the following CSS to customize a tab item when hovering.

.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
    background: #d1f6d1 !important;
}

Use the following CSS to customize the tab item popup icon on hover.

.e-tab .e-tab-header .e-hor-nav .e-popup-up-icon:hover,
.e-tab .e-tab-header .e-hor-nav .e-popup-down-icon:hover {
    background: #d1f6d1 !important;
}

Customizing selected item of Tab control

Use the following CSS to customize the selected tab item.

.e-tab .e-tab-header .e-toolbar-item.e-active {
    background: #d1f4d1;
}

Use the following CSS to customize the text and icon of the selected tab item.

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: green !important;
}