type为date的ion-input组件日历图标颜色异常无法改为白色如何解决

这个日历选择图标是WebKit内核浏览器内置的原生控件元素，Ionic没有提供专属的CSS变量控制它的样式，你可以通过CSS直接操作内置伪元素实现自定义颜色，以下是3种可行方案：

• 方案1：最简适配（适合深色背景场景）
  给输入框设置深色模式配色规则，原生控件会自动适配为浅色样式，图标直接变白：

  /* 给你的ion-input添加自定义class，比如custom-date-input */
  .custom-date-input input {
    color-scheme: dark;
  }
  

• 方案2：滤镜改色（灵活调整任意颜色）
  用CSS滤镜修改原生图标的颜色，不需要替换资源：

  .custom-date-input input::-webkit-calendar-picker-indicator {
    /* invert(1)将黑色反转为白色，需要其他颜色可调整滤镜参数 */
    filter: invert(1) brightness(2);
    /* 例：改为半透明白色：filter: invert(1) brightness(2) opacity(0.7); */
    /* 例：改为浅红色：filter: sepia(1) saturate(5) hue-rotate(-50deg) brightness(1.2); */
  }
  

• 方案3：完全替换自定义图标
  如果你需要用自己设计的图标样式，可以隐藏原生图标后追加自定义图标层，保留原生点击功能：

  /* 隐藏原生图标但保留点击交互 */
  .custom-date-input input::-webkit-calendar-picker-indicator {
    opacity: 0;
    z-index: 1;
  }
  /* 追加自定义图标层 */
  .custom-date-input {
    position: relative;
  }
  .custom-date-input::after {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: 20px;
    height: 20px;
    /* 替换为你的白色日历图标资源地址即可 */
    background: url('你的白色日历图标本地路径/base64地址') no-repeat center / contain;
    pointer-events: none;
  }
  

注意：如果你使用的是带样式隔离的框架（Vue/Angular/React CSS Modules），需要使用框架对应的深度选择器穿透样式隔离：

• Vue 2/3 单文件组件：用:deep()包裹选择器
• Angular：用::ng-deep前缀
• React CSS Modules：用:global()包裹选择器

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