如何使用CSS仅修改登录界面中的图标颜色

直接给输入框添加filter会作用于整个元素（包括输入框背景），导致背景色被修改。要只改变图标颜色，可采用以下两种方案：

方案一：拆分图标为独立元素（通用方案） #

将图标从输入框的backgroundImage中剥离，放到独立容器里，仅对图标元素应用滤镜：

1. 修改Field组件使用方式 #

调整输入框内边距，给图标预留位置，并传入图标地址：

<Field
  id={"userName"}
  name={"userName"}              
  component={FormInput}            
  placeholder="User Name"      
  iconSrc="UserName.png"
  style={{
    padding: "9px 20px 0px 45px", // 加大左侧内边距容纳图标
    borderTop: "none",
    borderLeft: "none",
    borderRight: "none",
    maxWidth: "440px",
  }}              
/>

2. 重构FormInput组件 #

在组件内部添加独立图标元素，仅对其应用颜色转换滤镜：

const FormInput = ({ iconSrc, ...props }) => {
  return (
    <div style={{ position: "relative", display: "inline-block" }}>
      {iconSrc && (
        <img 
          src={iconSrc} 
          alt="Input Icon"
          style={{
            position: "absolute",
            left: 10,
            top: 8,
            width: 25,
            height: 25,
            filter: "invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%)"
          }}
        />
      )}
      <input {...props} />
    </div>
  );
};

方案二：使用CSS Mask（适合纯色背景输入框） #

如果输入框背景为纯色，可利用CSS Mask实现图标变色，无需修改组件结构：

<Field
  id={"userName"}
  name={"userName"}              
  component={FormInput}            
  placeholder="User Name"      
  style={{
    maskImage: "url(UserName.png)",
    maskRepeat: "no-repeat",
    maskPosition: "-5px 8px",
    maskSize: "25px",
    backgroundColor: "white", // 设置图标颜色为白色
    padding: "9px 20px 0px 20px",
    borderTop: "none",
    borderLeft: "none",
    borderRight: "none",
    maxWidth: "440px",
  }}              
/>

该方法要求图标PNG为透明背景，mask会将图标区域显示为设置的backgroundColor，其余区域保持输入框原有背景。

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