如何修改Semantic UI React日期输入框的日历图标颜色？

当然可行，原生日期输入框的日历图标是浏览器自带元素，结合你设置的自定义类custom-date-input，可以通过CSS伪元素修改它的颜色，具体实现方案如下：

基础颜色调整方案 #

在全局样式文件或组件样式中添加以下CSS代码：

/* Chrome、Safari等webkit内核浏览器 */
.custom-date-input::-webkit-calendar-picker-indicator {
  /* 方法1：用滤镜调整色调，invert值0为黑色、1为白色，0.5为灰色，可按需修改 */
  filter: invert(0.3); 
  /* 方法2：直接设置颜色值，比如蓝色 */
  /* color: #1890ff; */
  cursor: pointer;
}

/* Firefox浏览器 */
.custom-date-input::-moz-calendar-picker-indicator {
  filter: invert(0.3);
  color: #1890ff;
  cursor: pointer;
}

替换自定义图标（可选） #

如果想要完全替换原生图标为自定义样式，也可以用背景图实现：

.custom-date-input::-webkit-calendar-picker-indicator {
  background-image: url('你的自定义图标路径.svg');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  color: transparent; /* 隐藏原生图标 */
  cursor: pointer;
}

注意事项 #

• 不同浏览器的伪元素前缀不同，需分别处理webkit和moz内核场景，保证兼容性；
• 确保CSS样式优先级足够，避免被Semantic UI默认样式覆盖；
• 若使用组件内联样式方案（如styled-components），同样可通过这些伪元素选择器设置样式。

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