Time Picker - CSS API Reference

All Common CSS variables:

Specific CSS variables for Time Picker styling:

• --smart-time-picker-default-width: Time Picker default width.
• --smart-time-picker-default-height: Time Picker default height.

The following CSS selectors can be used to style Time Picker:

• smart-time-picker - applied to the whole TimePicker element. Can be used for setting width, height and font-related CSS properties.
  • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
    • .smart-header - applied to the header of the TimePicker.
      • .smart-hour-minute-container - applied to the container of the hour and minute labels.
        • .smart-hour-container - applied to the hour label.
        • .smart-minute-container - applied to the minute label.
      • .smart-am-pm-container - applied to the container of the AM and PM labels.
        • .smart-am-container - applied to the AM label.
        • .smart-pm-container - applied to the PM label.
      • .smart-selected - applied to the hour, minute, AM or PM labels when they are selected.
    • .smart-main-container - applied to the container of the circular SVG picker and the footer.
      • .smart-svg-container - a container for the SVG picker
        • .smart-svg-picker - applied to the circular SVG picker.
          • .smart-needle - applied to the body of the SVG arrow.
          • .smart-needle-central-circle - applied to the central SVG circle and to the circular head of the SVG arrow.
          • .smart-label - applied to labels in the circular SVG picker.
      • .smart-footer - applied to the footer.

Demo

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