如何修改type=time的input组件激活状态的蓝色背景

先看你提供的输入框效果和代码：

你的代码：

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

要修改time输入框激活时的蓝色背景，需要针对不同浏览器的内核特性写CSS——不同浏览器对这类原生输入框的样式渲染逻辑不同，具体方案如下：

• 针对Chrome、Safari等Webkit内核浏览器
  通过::-webkit-datetime-edit伪元素结合:focus状态，直接覆盖输入区域的背景色：

input[type="time"]:focus::-webkit-datetime-edit {
  background-color: #f0f0f0; /* 替换成你想要的颜色 */
}

• 针对Firefox浏览器
  用::-moz-focus-inner伪元素调整激活状态下的背景和边框：

input[type="time"]:focus::-moz-focus-inner {
  border: none;
  background-color: #f0f0f0; /* 替换成你想要的颜色 */
}

• 额外调整：修改右侧日历图标颜色（可选）
  如果自定义背景后图标颜色不匹配，可以通过::-webkit-calendar-picker-indicator调整：

input[type="time"]:focus::-webkit-calendar-picker-indicator {
  filter: brightness(0.5); /* 用滤镜调整颜色，或者直接设置color属性 */
}

注意：移除默认焦点轮廓后，要保证自定义背景能让用户清晰识别输入框处于激活状态，避免影响可用性。

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