如何修改Formik中time类型Field的悬浮与选中默认颜色？

你可以通过自定义CSS覆盖默认伪类样式来实现需求，具体操作如下：

1. 针对你的时间选择器（使用form-control类），编写CSS规则覆盖:hover（悬浮）和:focus（选中）状态的边框及阴影样式：

/* 悬浮状态：设置指定蓝色边框 */
.form-control:not(:disabled):hover {
  border-color: #0d6efd; /* 替换为你需要的蓝色色值 */
}

/* 选中状态：设置指定黑色边框及阴影 */
.form-control:not(:disabled):focus {
  border-color: #000000; /* 替换为你需要的黑色色值 */
  box-shadow: 0 0 0 0.25rem rgba(0, 0, 0, 0.25); /* 可选：匹配黑色的阴影效果 */
}

2. 将这段CSS添加到项目的全局样式文件（如App.css）或组件内的style标签中即可生效。

额外提示： #

• 若使用Bootstrap框架，默认form-control:focus带有阴影效果，需通过box-shadow属性覆盖原有样式。
• 你的代码中style={{ Width: "3vw" }}应改为小写width，避免样式不生效：style={{ width: "3vw" }}

内容的提问来源于stack exchange，提问作者hemant kumar chaudhary