jQuery Tabs CSS Styling and Appearance

Styling and Appearance

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.

Below is the list of CSS classes used by jqxTabs.

jqxTabs Style
jqx-widget - applied to jqxTabs.
jqx-tabs - applied to jqxTabs.
jqx-tabs-close-button - applied to the tab close button.
jqx-tabs-close-button-selected - applied to the tab close button when the tab is selected.
jqx-tabs-close-button-hover - applied to the tab close button when the mouse is over the tab.
jqx-tabs-arrow-left - applied to the tab's left scroll arrow.
jqx-tabs-arrow-right - applied to the tab's right scroll arrow.
jqx-tabs-arrow-background - applied to the tab's scroll arrows.
jqx-tabs-title - applied to the tab's title.
jqx-tabs-title-bottom - applied to the tab's title when the 'position' is 'bottom'.
jqx-tabs-title a:link - applied to the anchor in tab's title.
jqx-tabs-title a:hover
jqx-tabs-title a:active
jqx-tabs-title a:visited
jqx-tabs-title-selected-top - applied to the tab's title when the tab is selected and the jqxTab's position property is set to 'top'
jqx-tabs-title-selected-bottom - applied to the tab's title when the tab is selected and the jqxTab's position property is set to 'bottom'
jqx-fill-state-pressed - applied to a selected tab.
jqx-tabs-title-hover-top - applied to the tab's title when the tab is hovered and the jqxTab's position property is set to 'top'
jqx-tabs-title-hover-bottom - applied to the tab's title when the tab is hovered and the jqxTab's position property is set to 'bottom'
jqx-fill-state-hover - applied to a hovered tab.
jqx-tabs-title-disable - applied to the tab's title when the tab is disabled
jqx-tabs-header - applied to the tab's header
jqx-widget-header - applied to the tab's header
jqx-tabs-header-bottom - applied to the tab's header when the position is bottom
jqx-tabs-header-collapsed - applied to the tab's header when the tab is collapsed
jqx-tabs-header-collapsed-bottom - applied to the tab's header when the position is bottom and tab is collapsed
jqx-tabs-collapsed - applied to the tabs when the 'collapsed' is true.
jqx-tabs-collapsed-bottom - applied to the tabs when the 'collapsed' is true and 'position' is bottom.
jqx-tabs-selection-tracker-container - applied to the tab's selection tracker container element.
jqx-tabs-selection-tracker-top - applied to the tab's selection tracker when the jqxTab's position property is set to 'top'.
jqx-tabs-selection-tracker-bottom - applied to the tab's selection tracker when the jqxTab's position property is set to 'bottom'.
jqx-tabs-content - applied to the tab's content element which represents a DIV element.
jqx-widget-content - applied to the tab's content element which represents a DIV element.
jqx-fill-state-disabled - applied to the jqxTabs when it is disabled.

When you create a custom style with colors and backgrounds for jqxtabs, you need to do the following:

Add the above CSS classes related to jqxtabs
After each CSS class, add your theme name.
For example:
jqx-tabs-summer

To apply your custom style to jqxtabs, you need to set its 'theme' property(option) to point to your theme name string.

<script type="text/javascript">
    $(document).ready(function () {
        // create jqxtabs.
        $('#jqxtabs').jqxTabs({ width: 550, height: 150, theme: 'summer' });
    });
</script>

The sample below demonstrates how to set the 'Summer' theme to jqxtabs.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery Tabs - CSS Styling Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create jqxtabs.
            $('#jqxtabs').jqxTabs({ width: 400, height: 150, theme: 'summer' });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body class='default'>
    <div id='jqxtabs'>
        <ul style='margin-left: 20px;'>
            <li>Tab 1</li>
            <li>Tab 2</li>
            <li>Tab 3</li>
            <li>Tab 4</li>
            <li>Tab 5</li>
        </ul>
        <div>
            Content 1
        </div>
        <div>
            Content 2
        </div>
        <div>
            Content 3
        </div>
        <div>
            Content 4
        </div>
        <div>
            Content 5
        </div>
    </div>
</body>
</html>

Styling and Appearance

jqxTabs Style