如何去除HTML5 date类型输入框的选中高亮颜色？

你当前的CSS已经做了部分处理，但还需要补充覆盖WebKit内核的几个默认控件样式，以及禁止文本选中行为，才能彻底消除选中效果。以下是完整的解决方案：

完整CSS代码 #

/* 处理日历选择器、上下箭头、清除按钮的样式与高亮 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button {
  cursor: pointer;
  border-radius: 4px;
  margin-right: 2px;
  opacity: 0.6;
  filter: invert(0.8);
  background: transparent;
  color: transparent;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: auto;
  height: auto;
  margin: auto;
  z-index: 20;
  outline: none;
  box-shadow: none;
}

/* 隐藏日期字段文本并禁止选中 */
input[type="date"]::-webkit-datetime-edit-year-field,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-text {
  color: transparent;
  user-select: none;
}

/* 基础输入框样式 */
input[type="date"] {
  background: transparent;
  color: transparent;
  appearance: none;
  outline: none;
  border: none;
  box-shadow: none;
  user-select: none;
}

/* 覆盖聚焦/激活状态的所有高亮 */
input[type="date"]:focus,
input[type="date"]:active,
input[type="date"]:focus-visible {
  background: transparent;
  color: transparent;
  appearance: none;
  outline: none;
  box-shadow: none;
  border-color: transparent;
}

/* 彻底禁止任何选中区域的高亮 */
input[type="date"]::selection,
input[type="date"]::-webkit-datetime-edit-year-field::selection,
input[type="date"]::-webkit-datetime-edit-month-field::selection,
input[type="date"]::-webkit-datetime-edit-day-field::selection {
  background: transparent !important;
  color: transparent !important;
}

/* Firefox 内核适配 */
input[type="date"]::-moz-calendar-picker-indicator {
  background: transparent;
  color: transparent;
}

input[type="date"]:focus {
  box-shadow: none;
  outline: none;
}

关键优化点 #

• 新增对::-webkit-inner-spin-button和::-webkit-clear-button的处理：这两个是date输入框默认自带的控件，默认会有聚焦高亮，需要统一清除样式
• 添加user-select: none：从根源上禁止输入框内的文本选中行为，避免触发选中高亮
• 明确覆盖box-shadow和border-color：部分浏览器在输入框聚焦时会默认添加阴影或边框高亮，需要强制清除
• 针对每个日期字段单独设置::selection：确保即使字段被意外选中，也不会显示高亮
• 补充Firefox适配代码：覆盖Gecko内核下的默认控件样式和聚焦高亮

内容的提问来源于stack exchange，提问作者Ashly Antony Babu