Firefox下Time输入框聚焦时修改日期时间字段背景失效问题

我需要实现：当用户点击或聚焦time类型输入框的时、分、上下午字段时，修改对应字段的背景色。目前无focus状态的背景色修改可正常生效，但针对Firefox的CSS选择器未生效；Chrome浏览器下使用-webkit前缀的对应选择器可正常实现需求。

Firefox下无效的CSS代码 #

.input[type='time']::-moz-datetime-edit-hour-field:focus {
  background-color: #3783f6;
}
.input[type='time']::-moz-datetime-edit-minute-field:focus {
  background-color: #3783f6;
}
.input[type='time']::-moz-datetime-edit-ampm-field:focus {
  background-color: #3783f6;
}

Chrome下有效的CSS代码 #

.input[type='time']::-webkit-datetime-edit-hour-field:focus {
  background-color: #3783f6;
}
.input[type='time']::-webkit-datetime-edit-minute-field:focus {
  background-color: #3783f6;
}
.input[type='time']::-webkit-datetime-edit-ampm-field:focus {
  background-color: #3783f6;
}

对应的TypeScript代码 #

<Input
  type="time"
  name="pickupTime"
  className={styles.input}
  aria-labelledby="pickupLabel pickupTime"
  ref={register({
    required: true,
    validate: (pickupTime: string) => {
      const startDate = getValues('startDate');
      const pickup = moment(`${startDate} ${pickupTime}`);
      return startDate
        ? isTimeValid(startDate, pickupTime) &&
            checkBounds(startDate, pickup)
        : true;
    },
  })}
/>

内容的提问来源于stack exchange，提问作者ilovecode