css 如何更改输入类型的背景时间活动的蓝色背景

bnlyeluc  于 2022-12-20  发布在  其他
关注(0)|答案(3)|浏览(122)

<div className=" ">
         <input
              type="time"
              className="w-full h-full border-none outline-none"
          />
  </div>

我正在使用输入时间字段,我想改变蓝色背景。有什么方法可以解决这个问题吗?

brc7rcf0

brc7rcf01#

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

jhkqcmku

jhkqcmku2#

简而言之,你不能。这在浏览器之间是不同的。建议是用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 {}
wqlqzqxt

wqlqzqxt3#

通过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以获得更多信息和指导。

相关问题