Style

You can easily customize your timedropper style by using and changing CSS variables.

How it works

You can copy and paste the code below with the CSS variables directly on your CSS stylesheet or by creating a new one and link it to the <head> of your website.

:root {
  --td-textColor: #555555;
  --td-backgroundColor: #FFF;
  --td-primaryColor: #6E99FF;
  --td-displayBackgroundColor: #FFF;
  --td-displayBorderColor: #6E99FF50;
  --td-displayBorderStyle: solid;
  --td-displayBorderWidth: 4px;
  --td-handsColor: #6E99FF50;
  --td-handleColor: #6E99FF;
  --td-handlePointColor: white;
}

As you can see, CSS variables are refering to the main root so they will be apply globally. Of course, you can singularly change each timepicker style by using the javascript option "customClass" as shown below.

$('.picker-input-1').timeDropper({
  customClass: 'picker1'
});
$('.picker-input-2').timeDropper({
  customClass: 'picker2'
});

This way you will be able to change style properties by adding new classes with the customized variables. For example, if you only want to change text color for each single timepicker, you can do it this way:

.picker1 {
  --td-textColor: red;
}
.picker2 {
  --td-textColor: green;
}

So now timepickers will change only text color and will continue to use the root ones as primary colors.

Style options

These are all the style options available

Variable	Default
--td-textColor	#555555
--td-backgroundColor	#FFF
--td-primaryColor	#6E99FF
--td-displayBackgroundColor	#FFF
--td-displayBorderColor	#6E99FF50
--td-displayBorderStyle	solid
--td-displayBorderWidth	4px
--td-handsColor	#6E99FF50
--td-handleColor	#6E99FF
--td-handlePointColor	white