Numeric Text Box CSS API Reference

All Common CSS variables:

    Specific CSS variables for Numeric Text Box styling:

    • --smart-numeric-text-box-default-width: NumericTextBox default width.
    • --smart-numeric-text-box-default-height: NumericTextBox default height.

    The following CSS selectors can be used to style Numeric Text Box:

    • smart-numeric-text-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-numeric-text-box-component .smart-numeric-text-box-radix-display - a DIV element used to display the radix.
        • .smart-numeric-text-box-component .smart-input - an HTML Input element used for the user input.
        • .smart-numeric-text-box-component .smart-numeric-text-box-unit-display - a DIV element used to display the unit.
        • .smart-spin-buttons-container - a container for the spin buttons.
          • .smart-spin-button - a smartRepeatButton used to increment the value.
            • .smart-arrow-up - arrow up container.
          • .smart-spin-button - a second smartRepeatButton used to decrement the value.
            • .smart-arrow-up - arrow down container.
        • .smart-drop-down - a UL element that represents the dropdown with radix selection.
          • .smart-list-item - a list item (LI element).
        • .smart-hint - the hint of the element.

    Demo

    <style>
            #numerictextbox{
                    --smart-color: #ccc;
                    --smart-font-size: 20px;
            }
    </style>