Custom Elements 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 jqxDropDownButton. jqxDropDownButton as similar visually with jqxDropDownList, shares the same CSS classes.

• jqx-widget - applied to the dropdownbutton.
• jqx-dropdownlist-content - applied to the dropdownbutton's content element which displays the selected item's text or html.
• jqx-dropdownlist-content-disabled - applied to the dropdownbutton's content element which displays the selected item's text or html and the widget is disabled.
• jqx-dropdownlist-state-normal - applied to the dropdownbutton in default state.
• jqx-fill-state-normal - applied to the dropdownbutton in default state.
• jqx-dropdownlist-state-hover - applied to the dropdownbutton in hovered state.
• jqx-fill-state-hover - applied to the dropdownbutton in hovered state.
• jqx-dropdownlist-state-selected - applied to the dropdownbutton in selected state.
• jqx-fill-state-pressed - applied to the dropdownbutton in selected state.
• jqx-dropdownlist-state-disabled - applied to the dropdownbutton in disabled state.
• jqx-fill-state-focus - applied to the dropdownbutton when it is focused.
• jqx-fill-state-disabled - applied to the dropdownbutton when it is disabled.

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

• Add the above CSS classes related to jqxDropDownButton
• After each CSS class, add your theme name.
  For example:
  jqx-dropdownbutton-summer
• To apply your custom style to jqxDropDownButton, you need to set its 'theme' property(option) to point to your theme name string.