Add Interactive CSS style to Ajax Toolkit Tab Control in Asp.Net

In this tutorial, we study how to apply interactive CSS styles to Ajax Control Toolkit Tabs control in Asp.Net.

Default.aspx

<ajaxToolkit:TabContainer CssClass="tab" runat="server" ID="Tabs" ActiveTabIndex="0" Width="402px">
            <ajaxToolkit:TabPanel runat="server" ID="Panel1" HeaderText="Signature and Bio">
                <ContentTemplate>
                    <asp:UpdatePanel ID="updatePanel1" runat="server">
                        <ContentTemplate>
                            <table>
                                <tr>
                                    <td>
                                        Signature:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="signatureText" runat="server" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        Bio:
                                    </td>
                                    <td>
                                        <asp:TextBox ID="bioText" runat="server" />
                                    </td>
                                </tr>
                            </table>
                            <asp:Button ID="Button3" runat="Server" Text="Save" />
                            <br />
                            <br />
                            Hit Save to cause a postback from an update panel inside the tab panel.<br />
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="server" ID="Panel3" HeaderText="Email">
                <ContentTemplate>
                    Email:
                    <asp:TextBox ID="emailText" runat="server" />
                    <br />
                    <br />
                    <asp:Button ID="Button1" runat="server" Text="Save" />
                    <br />
                    <br />
                    Hit Save to cause a full postback.
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel runat="server" ID="Panel2" HeaderText="Controls">
                <ContentTemplate>
                    <div>
                        Controls authored by Toolkit User (read-only - demo purposes):</div>
                    <ul>
                        <li>Calendar</li>
                        <li>MaskedEdit</li>
                        <li>Accordion</li>
                        <li>Calendar</li>
                        <li>Calendar</li>
                    </ul>
                    <br />
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>

CSS Style for following Screen -

StyleSheet.css

.tab {
border: 1px solid #DDD;
}
.tab .ajax__tab_body
{
    padding:10px;
    }
.tab .ajax__tab_header
{
    font-family:Tahoma;
    text-transform:uppercase;
    font-size:12px;
    font-weight:bold;
    background: #F5F5F5;
    border-bottom: 1px solid #bbb;
    border-top:1px solid #BBB
    }
.tab .ajax__tab_header .ajax__tab_active .ajax__tab_outer
{
    height: 21px;
    background:#fff;
    }
.tab .ajax__tab_header .ajax__tab_active .ajax__tab_tab
{
    background:#fff;
    height: 18px;
    padding: 5px 7px 5px 7px;
    margin: 0px;
    border:0;
    color:#333;
    }
.tab .ajax__tab_header .ajax__tab_active .ajax__tab_inner
{
    padding-left: 3px;
    background:#fff;
    border-right:1px solid #bbb;
    border-left:1px solid #bbb;
    border-bottom:0;
    }
.tab .ajax__tab_tab
{
    padding:7px;
    color:#333;
    border-right:1px solid #bbb;
    border-left:1px solid #bbb;
    }

CSS for following Screen -

StyleSheet.css

.blue {
border: 1px solid #09B;
}
.blue .ajax__tab_body
{
    padding:10px;
    }
.blue .ajax__tab_header
{
    font-family:Tahoma;
    text-transform:uppercase;
    font-size:12px;
    font-weight:bold;
    background: #09C;
    border-bottom: 1px solid #bbb;
    border-top:1px solid #09B
    }
.blue .ajax__tab_header .ajax__tab_active .ajax__tab_outer
{
    height: 21px;
    background:#fff;
    }
.blue. ajax__tab_header .ajax__tab_active .ajax__tab_tab
{
    background:#fff;
    height: 18px;
    padding: 5px 7px 5px 7px;
    margin: 0px;
    border:0;
    color:#333;
    }
.blue.ajax__tab_header .ajax__tab_active .ajax__tab_inner
{
    padding-left: 3px;
    background:#fff;
    border-right:1px solid #09B;
    border-left:1px solid #09B;
    border-bottom:0;
    }
.blue .ajax__tab_tab
{
    padding:7px;
    color:#fff;
    border-right:1px solid #09B;
    border-left:1px solid #09B;
    }

Tabs CSS properties

1. .ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer. Child CSS classes:.ajax__tab_outer.
2. .ajax__tab_outer: An outer element of a tab, often used to set the left-side background image of the tab.Child CSS classes: .ajax__tab_inner.
3. .ajax__tab_inner: An inner element of a tab, often used to set the right-side image of the tab. Child CSS classes:.ajax__tab_tab.
4. .ajax__tab_tab: An element of the tab that contains the text content. Child CSS classes:none.
5. .ajax__tab_body: A container element that wraps the area where a TabPanel is displayed. Child CSS classes: none.
6. .ajax__tab_hover: This is applied to a tab when the mouse is hovering over. Child CSS classes:.ajax__tab_outer.
7. .ajax__tab_active: This is applied to a tab when it is the currently selected tab. Child CSS classes:.ajax__tab_outer.

Download Demo Source Code