这不可能改变输入类型日期和时间的内部样式

简而言之，你不能。这在浏览器之间是不同的。建议是用JavaScript从头开始构建一个，或者接受它并围绕它构建。
有一些风格，你可以改变，但只是没有从弹出窗口。

/* wrapper around time */
input[type=time]::-webkit-datetime-edit-fields-wrapper {}

/* space between the different fields */
input[type=time]::-webkit-datetime-edit-text {}

/* hour field (us :focus to get rid of the default color on click) */
input[type=time]::-webkit-datetime-edit-hour-field {}

/* minute field */
input[type=time]::-webkit-datetime-edit-minute-field {}

/* AM/PM field */
input[type=time]::-webkit-datetime-edit-ampm-field {}

/* clear/reset button */
input[type=time]::-webkit-clear-button {}

/* up/down arrows */
input[type=time]::-webkit-inner-spin-button {}

通过className属性，我将假设您在这里使用TailwindCSS。
您可能需要考虑使用hover:
例如：

<div>
        <input
              type="time"
              className="w-full h-full border-none outline-none hover:bg-blue-400 hover:duration-500 duration-500"
         />
 </div>

我强烈建议查看TailwindCSS Documentation以获得更多信息和指导。