Style guide of timedropper JS

On this page:

    Try the new timedropper JS configurator to easily get the best plugin configuration!
    Configure now

    How to Customize the Timepicker Style

    Timedropper allows for extensive customization, enabling you to tailor its appearance to match your website's design. Below, you’ll find detailed instructions on how to modify its styles using CSS variables and predefined options.

    You can apply the following CSS variables by adding them directly to your stylesheet or by creating a new one and linking it to the <head> section of your website.

    :root {
      --td-size: 208px;
      --td-text: #999999;
      --td-background: #FFFFFF;
      --td-primary: #A2E073;
      --td-active: #222222;
      --td-invalid: #FF5D4D;
      --td-overlay: rgba(0, 0, 0, .75);
      --td-displayBorderColor: var(--td-primary);
      --td-displayBorderStyle: solid;
      --td-displayBorderWidth: 4px;
    }

    These CSS variables are defined in the :root, meaning they are applied globally. However, if you want to customize styles for individual timepickers, you can use the customClass option as shown below:

    <input type="time" data-option-custom-class="style1">
    <input type="time" data-option-custom-class="style2">
    

    By adding new classes, you can override specific style properties. For example, to change only the primary color for each timepicker, use the following code:

    .style1 {
      --td-primary: red;
    }
    .style2 {
      --td-primary: green;
    }

    With this setup, the timepickers will use the root variables by default but apply the customized primary color for the specific styles.

    You can also inspect elements in your browser’s developer tools to identify additional classes and customize them further in your CSS stylesheet.


    Style Presets

    Timedropper comes with three built-in style presets. You can easily apply them using the customClass option. Here’s an example:

    <input type="time" data-option-custom-class="td--theme-[NAME]">
    OptionResult
    td--theme-dark
    td--theme-bootstrap