How to configure the Tab Control style on the WEB

Official Content
This documentation is valid for:

The Tab control for web appearance can be configured using the following properties:

Tab Control Class property

It's a control property that determines the Theme Class that will be associated with the Tab control. The predetermined class for Tab controls is "Tab", but you can create other classes under the Tab class in the Theme. See the pictures below.


TabPage Class

The control's tab pages can be styled using class properties which are grouped under the Tab Class (or any of its descendants).

These properties are as follows:

  • Tab Item Class: Configure the style of the tab control's tab pages.
  • First Tab Item Class: Configure the style of the tab control's first tab page.
  • Last Tab Item Class: Configure the style of the tab control's last tab page.
  • Tab Strip Class: Sets the style for the strip containing all the tab pages. It's a Section class. 


How to change the effects on hover, focus, and selection of the tab pages

Tab pages can change their style when the user hovers over any them, or when he selects or sets the focus on a tab page.

This is achieved using the following class properties which are grouped under the TabPage class:

  • Selected Class
  • Hovered Class
  • Focused Class

These classes should be TabPage classes or their descendants.



Suppose that you need to have the tab control shown in the following picture:


The Tab Control Class property is "TabSessions" in this example. The TabSessions class has the following associations:

  • Tab Item Class = TabPageSessions
  • First Tab Item Class = TabPageSessions
  • Last Tab Item Class= TabPageSessions
  • Tab Strip Class = TabSessionStrip

The TabPageSessions and the TabSessionStrip property have the background color set to #458686 and the following font properties:

    background-color: #458686;
    text-decoration: none;
    color: white;
    text-transform: uppercase;


The TabPageSessions "Selected Class property" is set to TabPageSessionsSelected class. This class sets the ForeColor property to black, as it is the desired design for the selected tab pages.