如何修改WP CF7中[date]字段日历的颜色？

Contact Form 7的[date]字段调用的是浏览器原生日期选择器，默认样式由浏览器控制，普通CF7插件样式无法覆盖。你需要使用浏览器特定的CSS伪元素/属性来修改这些样式，以下是针对移动端主流浏览器（Chrome、Safari、Firefox）的解决方案：

核心样式代码 #

将以下代码添加到主题自定义CSS（外观 → 自定义 → 额外CSS）或子主题的style.css文件中，把#your-target-color替换为适配你网站的颜色值：

1. 修改选中日期的背景与文字颜色 #

/* Chrome/Edge 移动端选中日期 */
input[type="date"]::-webkit-datetime-edit-selected {
  background-color: #your-target-color;
  color: #fff; /* 选中日期文字色，按需调整 */
}

/* Firefox 移动端选中日期 */
input[type="date"]::-moz-calendar-date-selected {
  background-color: #your-target-color;
  color: #fff;
}

2. 修改日历标题区域（年月栏）颜色 #

/* Chrome/Edge 年月文字颜色 */
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: #your-target-color;
}

/* Safari 日历标题栏背景与文字色 */
input[type="date"]::-webkit-calendar-header {
  background-color: #your-target-color;
  color: #fff;
}

3. 修改设置/取消/清除按钮颜色 #

/* Chrome/Edge 操作按钮图标颜色 */
input[type="date"]::-webkit-clear-button,
input[type="date"]::-webkit-inner-spin-button {
  filter: invert(40%) sepia(90%) saturate(300%) hue-rotate(180deg); /* 滤镜值对应目标颜色，可自行调整 */
}

/* Safari 操作按钮样式 */
input[type="date"]::-webkit-calendar-picker-button {
  background-color: #your-target-color;
  color: #fff;
  border: none;
}

注意事项 #

• 不同浏览器的伪元素命名存在差异，需分别针对Chrome/Edge、Safari、Firefox编写样式
• 如果样式不生效，可在选择器前添加CF7表单容器类提升权重，例如：.wpcf7-form input[type="date"]::-webkit-datetime-edit-selected
• 无需依赖CF7专用CSS插件，这类插件仅覆盖插件自带表单样式，无法触及浏览器原生组件

内容的提问来源于stack exchange，提问作者Marcin S