List Box CSS API Reference

All Common CSS variables:

  • --smart-primary: The theme primary color.
  • --smart-primary-color: Text color on top of a primary background.
  • --smart-secondary: The theme secondary color.
  • --smart-secondary-color: Text color on top of a secondary background.
  • --smart-error: The theme error color.
  • --smart-error-color: Text color on top of a error background.
  • --smart-success: The theme success color.
  • --smart-success-color: Text color on top of a success background.
  • --smart-background: The theme background color. The background color appears behind scrollable content.
  • --smart-background-color: Text color on top of a background background.
  • --smart-surface: The theme surface color. Surface colors affect surfaces of components, such as cards, sheets, and menus.
  • --smart-surface-color: Text color on top of a surface surface.
  • --smart-disabled: The theme primary color in disabled state.
  • --smart-disabled-color: Text color on top of a theme background in disabled state.
  • --smart-font-size: Theme font-size.
  • --smart-font-family: Theme font-family.
  • --smart-border-width: Theme border-width.
  • --smart-border-radius: Theme border-radius.
  • --smart-border: The theme border settings.
  • --smart-outline: The theme border color.
  • --smart-arrow-size: Font size of the arrow elements.
  • --smart-editor-selection: Background color of the selected text.
  • --smart-editor-selection-color: Color of the selected text.
  • --smart-alternation-index0-color: Alternation color for index0.
  • --smart-alternation-index0-border-color: Alternation border color for index0.
  • --smart-alternation-index0-background: Alternation background color for index0.
  • --smart-alternation-index1-color: Alternation color for index1.
  • --smart-alternation-index1-border-color: Alternation border color for index1.
  • --smart-alternation-index1-background: Alternation background color for index1.
  • --smart-alternation-index2-color: Alternation color for index2.
  • --smart-alternation-index2-border-color: Alternation border color for index2.
  • --smart-alternation-index2-background: Alternation background color for index2.
  • --smart-tick-color: Default tick color for smartTank, smartSlider and smartGauge.
  • --smart-tick-label-color: Default tick label color for smartTank, smartSlider and smartGauge.
  • --smart-box-height: Default height for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-box-width: Default width for Dialog, Gauge, Accordion, Tabs, Tree, Array.
  • --smart-bar-height: Default height for headers and footers.
  • --smart-bar-width: Default width for headers and footers.
  • --smart-editor-height: Default height for editors.
  • --smart-editor-width: Default width for editors.
  • --smart-editor-drop-down-width: Default width for editors drop-down.
  • --smart-editor-drop-down-height: Default height for editors drop-down.
  • --smart-editor-label-padding: Default padding for inputs.
  • --smart-editor-addon-width: Default width for spin buttons, dropdown buttons.

Specific CSS variables for List Box styling:

  • --smart-list-box-default-width: Defines ListBox default width.
  • --smart-list-box-default-height: Defines ListBox default height.
  • --smart-list-box-background: Defines ListBox background color.
  • --smart-list-box-border: Defines element's border color.
  • --smart-list-box-border-width: Defines element's border width.
  • --smart-list-box-color: Defines element's color.
  • --smart-list-box-font-family: Defines element's font family.
  • --smart-list-box-font-size: Defines element's font size.
  • --smart-list-box-border-top-right-radius: Defines element's top-right border radius.
  • --smart-list-box-border-top-left-radius: Defines element's top-left border radius.
  • --smart-list-box-border-bottom-left-radius: Defines element's bottom-left border radius.
  • --smart-list-box-border-bottom-right-radius: Defines element's bottom-right border radius.
  • --smart-list-item-group-header-background: Defines list item's group header background color.
  • --smart-list-item-group-header-border: Defines list item's group header border color.
  • --smart-list-item-group-header-color: Defines list item's group header color.
  • --smart-list-item-group-header-text-transform: Defines list item's group header text captalization.
  • --smart-list-item-border-top-right-radius: Defines list item's top-right border radius.
  • --smart-list-item-border-top-left-radius: Defines list item's top-left border radius.
  • --smart-list-item-border-bottom-left-radius: Defines list item's bottom-left border radius.
  • --smart-list-item-border-bottom-right-radius: Defines list item's bottom-right border radius.
  • --smart-list-item-horizontal-offset: Defines list item's horizontal offset.
  • --smart-list-item-vertical-offset: Defines list item's vertical offset.
  • --smart-list-item-border-width: Defines list item's border width.
  • --smart-list-item-background-opacity: Defines list item's background opacity.
  • --smart-list-item-background: Defines list item's background color.
  • --smart-list-item-border: Defines list item's border color.
  • --smart-list-item-color: Defines list item's color.
  • --smart-list-item-background-hover: Defines list item's background color when the item is hovered.
  • --smart-list-item-background-opacity-hover: Defines list item's background color opacity when the item is hovered.
  • --smart-list-item-border-hover: Defines list item's border color when the item is hovered.
  • --smart-list-item-color-hover: Defines list item's color when the item is hovered.
  • --smart-list-item-background-active: Defines list item's background color when the item is active.
  • --smart-list-item-background-opacity-active: Defines list item's background opacity when the item is active.
  • --smart-list-item-border-active: Defines list item's border color when the item is active.
  • --smart-list-item-color-active: Defines list item's color when the item is active.
  • --smart-list-item-background-focus: Defines list item's background color when it's focused.
  • --smart-list-item-background-opacity-focus: Defines list item's background opacity when it's focused.
  • --smart-list-item-border-focus: Defines list item's border color when it's focused.
  • --smart-list-item-color-focus: Defines list item's border color when an item is focused.

The following CSS selectors can be used to style ListBox:

  • smart-list-box - the element itself. Can be used to set width and height for the whole element.
    • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
      • INPUT element - an HTML Input element used for the filter input.
      • .smart-list-items-container - a container for the list items and the placeholder.
        • .smart-placeholder - a placeholder used when no items are present.
        • .smart-list-items-inner-container - a container that holds all list items.
          • smart-list-item - smartListItem elements that represent the items of the list box.
        • INPUT element - a n HTML Input element used when editing items.
      • smart-scroll-bar - a smartScrollBar element used for horizontal scrolling.
      • smart-scroll-bar - a smartScrollBar element used for vertical scrolling.
      • .smart-loader-container - a container for the loading indicator.
        • .smart-loader - the loading indicator.
        • .smart-loader-label - a label for the loading indicator.

Demo

<style>
        #listbox{
                --smart-list-box-border-top-right-radius: 10px;
                --smart-list-box-border-top-left-radius: 10px;
                --smart-list-box-border-bottom-left-radius: 10px;
                --smart-list-box-border-bottom-right-radius: 10px;
        }
</style>