Javascript plugins
jQuery plugins
Legal
On this page:
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]">
Option | Result |
---|---|
td--theme-dark | |
td--theme-bootstrap |