HTML怎么修改日期输入框的高亮颜色-html教程-PHP中文网

Chrome中的高亮颜色需通过appearance: none解除原生锁定，再用outline: none+box-shadow替代默认聚焦边框，并用::-webkit-calendar-picker-indicator配合filter调整右侧图标颜色。

html怎么修改日期输入框的高亮颜色

Chrome 中的高亮颜色怎么改

默认情况下，Chrome（及基于 Chromium 的浏览器）在聚焦时，会用蓝色高亮整个输入框（包括下拉箭头区域），这个颜色无法通过 outline 或 border 直接覆盖——它来自 Shadow DOM 内部的伪元素，必须穿透样式。

关键点：只对 Chromium 系生效；Firefox 和 Safari 不支持同套伪类，且行为不同。

实操建议：

用 ::-webkit-calendar-picker-indicator 单独控制右侧小图标区域（比如改颜色、隐藏、加滤镜）
用 ::-webkit-inner-spin-button 在某些旧版本中可能影响（但 date 输入框通常不显示该按钮）
真正影响“高亮边框”的是聚焦时的 outline，但 Chrome 会强制叠加一层浅蓝背景/描边，需用 outline: none + box-shadow 替代
必须加 appearance: none 才能解除原生样式锁定，否则大部分伪元素无效

实际可生效的 CSS 组合写法

下面这段能稳定覆盖 Chrome 的聚焦高亮效果（含边框色 + 背景微调）：

input[type="date"] {
  appearance: none;
  outline: none;
  border: 2px solid #94a3b8;
  border-radius: 6px;
  padding: 8px 12px;
}
<p>input[type="date"]:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}</p><p>/<em> 隐藏原生下拉箭头并重置其聚焦态 </em>/
input[type="date"]::-webkit-calendar-picker-indicator {
filter: invert(40%) sepia(1) saturate(4) hue-rotate(210deg);
cursor: pointer;
}</p><p>/<em> 可选：禁用箭头点击时的默认聚焦反馈（部分版本需要） </em>/
input[type="date"]::-webkit-calendar-picker-indicator:hover {
background: transparent;
}</p>

注意：filter 是最稳妥的改色方式（比 background 或 color 更可靠），因为箭头是 SVG 图标，直接设颜色无效；box-shadow 替代 outline 是为了绕过浏览器对 outline 的硬编码高亮逻辑。