ShowEasyFrontEnd/FrontEnd/components/newComponent/form/ElementTimePicker.vue

<template>
  <client-only>
    <div class="md:tw-flex md:tw-items-center">
      <label class="tw-block tw-mb-[20px] md:tw-mb-0 md:tw-mr-[100px]"><span>{{$t('Departure Time')}}<span
            class="required">*</span></span></label>
      <div class="element tw-flex tw-items-center">
        <vue-timepicker format="HH" placeholder="--" input-width="90px" fixed-dropdown-button></vue-timepicker>
        <div class="tw-mx-[16px]">:</div>
        <vue-timepicker format="mm" placeholder="--" input-width="90px" fixed-dropdown-button></vue-timepicker>
      </div>
    </div>
  </client-only>
</template>
<script>
export default {
  name: "elementTimePicker",
};
</script>
<style lang="scss" scoped>
:deep() {
  .element {

    .vue__time-picker-dropdown ul li:not([disabled]).active,
    .vue__time-picker-dropdown ul li:not([disabled]).active:focus,
    .vue__time-picker-dropdown ul li:not([disabled]).active:hover,
    .vue__time-picker .dropdown ul li:not([disabled]).active,
    .vue__time-picker .dropdown ul li:not([disabled]).active:focus,
    .vue__time-picker .dropdown ul li:not([disabled]).active:hover {
      background: #f48800;
      color: #fff;
    }
  }
}
</style>