Documentation

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 jqxListBox.

jqx-widget - applied to jqxListBox.
jqx-listbox - applied to jqxListBox.
jqx-listbox-bottomright-applied to the ListBox's element displayed when the horizontal and vertical scrollbars are visible and the element is positioned below the vertical scrollbar and on the right of the horizontal scrollbar.
jqx-listitem-state-group - applied to the ListBox's groups.
jqx-listitem-state-normal - applied to a list item in default state.
jqx-listitem-state-hover - applied to a list item in hovered state.
jqx-fill-state-hover - applied to a list item in hovered state.
jqx-listitem-state-selected - applied to a list item when the item is selected.
jqx-fill-state-pressed - applied to a list item when the item is selected.
jqx-listitem-state-disabled - applied to a list item when the item is disabled or the ListBox is disabled.
jqx-fill-state-focus - applied to the ListBox when it is focused.
jqx-fill-state-disabled- applied to the ListBox when it is disabled.

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

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

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

<script type="text/javascript">
    $(document).ready(function () {
        var source = [
            "Affogato"
		];
        // Create a jqxListBox
        $("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px', theme: 'summer' });
    });
</script>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jQuery ListBox 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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></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>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
                    "Breve",
                    "Café Bombón",
                    "Café au lait",
                    "Caffé Corretto",
                    "Café Crema",
                    "Caffé Latte",
		        ];
                // Create a jqxListBox
                $("#jqxlistbox").jqxListBox({ source: source, width: '200px', height: '200px', theme: 'summer' });
            });
        </script>
        <div id='jqxlistbox'>
        </div>
    </div>
</body>
</html>