Combo Box CSS API Reference

All Common CSS variables:

    Specific CSS variables for Combo Box styling:

    • --smart-combo-box-default-width: smartComboBox default width.
    • --smart-combo-box-default-height: smartComboBox default height.

    The following CSS selectors can be used to style ComboBox:

    • smart-combo-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.
        • .smart-label - the label of the element.
        • .smart-content - a container for the drop down and selection field.
          • .smart-selection-field - a container for the input field.
            • INPUT element - an HTML Input element used for the user input.
        • smart-combo-box-auto-complete-string -a DIV container that holds the autoComplete string.
          • .smart-drop-down-button - an HTML Span element used as a button for the listBox drop down.
            • SPAN element - an HTML Span element used for the arrow icon of the button.
          • .smart-drop-down .smart-drop-down-container - a container for the drop down popup.
            • smart-list-box - smartListBox - the popup. Can be styled like every other smartListBox element.
            • .smart-drop-down-resize-bar - the resize bar which can be used to resize the drop down popup.
          • DIV element - a simple DIV element used as a resizing indicator.
        • .smart-hint - a container for the hint of the element.

    Demo

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