CSS Classes

The table lists every class that main.css of timepicker-ui 4.5.0 has a rule for. Classes of the range, timezone and wheel plugins appear only when the plugin is registered and turned on in the options.

The picker also renders a few classes that have no rule in main.css. They are not in the table, but you can target them:

• tp-ui-type-mode on both AM/PM buttons, next to tp-ui-am and tp-ui-pm.
• tp-ui-range-from and tp-ui-range-to on the range tabs, and tp-ui-range-from-time and tp-ui-range-to-time on their times.
• tp-ui-wheel-hours, tp-ui-wheel-minutes and tp-ui-wheel-seconds on the wheel columns.
• tp-ui-clock-hand-24h on the hand, set together with tp-ui-circle-hand-24h.

These classes have no tp-ui- prefix. The picker adds them next to a tp-ui-* class when a state starts and removes them when it ends. Write them together with that class, as in .tp-ui-hour.active. A rule for a bare .active or .disabled elsewhere on your page also matches the picker.

Mode classes such as tp-ui--inline, tp-ui-wheel-mode and tp-ui-has-seconds sit on .tp-ui-modal. They are listed under All classes.

Controls with the data-md3-ripple attribute also get is-pressed while a pointer is down on them, and is-rippling while the ripple runs (never with prefers-reduced-motion). Wheel items next to the selected one get is-near, which has no built-in rule.

Built-in state rules use two or three classes. .tp-ui-hour.active sets the background-color and color of the selected field, and .tp-ui-hour.mobile.active does the same in the keyboard view. A .tp-ui-hour.active rule of your own has the same weight as the first one, so whichever loads last wins. It always loses to the second. Theme files only set --tp-* variables, so they add no rules you have to beat.

Pass a class in ui.cssClass and start each selector with .tp-ui-wrapper.<your-class>. The picker adds the class to .tp-ui-wrapper when it opens. The prefix adds two classes, so .tp-ui-wrapper.my-picker .tp-ui-hour.active has four and wins over the built-in state rules. Load your stylesheet after timepicker-ui/main.css, so it also wins a tie, such as the hover rule of a selected field in the keyboard view.

1/* new TimepickerUI(input, { ui: { cssClass: 'my-picker' } }) */
2.tp-ui-wrapper.my-picker .tp-ui-hour.active,
3.tp-ui-wrapper.my-picker .tp-ui-minutes.active {
4  background-color: #111111;
5  color: #ffffff;
6}
7
8.tp-ui-wrapper.my-picker .tp-ui-am.active,
9.tp-ui-wrapper.my-picker .tp-ui-pm.active {
10  background-color: #111111;
11  color: #ffffff;
12}

The prefix wins without the state class too. A background-color on .tp-ui-wrapper.my-picker .tp-ui-hour also replaces the hover and selected colors. To recolor a part in every state, set its variables instead. A few layout rules use four classes or more, for example the field sizes when seconds are shown, which start with .tp-ui-has-seconds .tp-ui-wrapper-time. Change those through their variables too.

In forced-colors mode the rules for the selected field, AM/PM button and dial number use system colors with !important, so they win over yours.