如何修改输入框点击或TAB聚焦时的颜色？日期输入框蓝色问题求助

一、实现输入框聚焦时的颜色变化 #

要搞定输入框点击或按TAB切换聚焦时的颜色效果，只加outline: none没用，得自定义聚焦状态的边框、阴影这些样式——不同浏览器默认的聚焦样式逻辑不一样，直接写下面的CSS覆盖就行：

/* 移除默认聚焦轮廓，同时自定义边框和阴影颜色 */
input:focus {
  outline: none;
  border-color: #你的自定义颜色; /* 示例：#ff7f50 */
  box-shadow: 0 0 4px #你的自定义颜色; /* 可选，增强聚焦视觉效果 */
}

/* 如果需要改聚焦时的文本颜色，再加这行 */
input:focus {
  color: #你的文本颜色;
}

二、修改日期输入框的蓝色样式 #

你说的点击日期输入框出现的蓝色（对应配图里的日历按钮区域），是浏览器自带的日期控件样式，得针对不同内核的浏览器单独调整：

1. 调整日历选择按钮的颜色（Chrome/Safari等WebKit内核） #

直接用伪元素::-webkit-calendar-picker-indicator修改按钮颜色，两种方式任选：

input[type="date"]::-webkit-calendar-picker-indicator {
  /* 方式1：用滤镜调色，适合快速调整色调 */
  filter: invert(0.4) sepia(1) saturate(6) hue-rotate(180deg);
  /* 方式2：直接设置颜色（部分浏览器支持） */
  color: #你的自定义颜色;
  cursor: pointer; /* 加上鼠标指针样式，优化交互 */
}

2. 去掉日期输入框聚焦时的内部高亮 #

如果是输入框内部文本区域的蓝色高亮，再加这段代码：

input[type="date"]:focus::-webkit-datetime-edit {
  color: #你的文本颜色;
  background-color: #你的背景颜色;
}

/* 确保日期输入框聚焦时没有默认轮廓 */
input[type="date"]:focus {
  outline: none;
  border-color: #你的自定义边框色;
}

3. Firefox浏览器兼容 #

Firefox里可以用accent-color直接调整日期控件的强调色：

input[type="date"] {
  accent-color: #你的自定义颜色;
}

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