List Box CSS API Reference

All Common CSS variables:

    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-item-horizontal-offset: Defines list item's horizontal offset.
    • --smart-list-item-vertical-offset: Defines list item's vertical offset.

    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>