How can I change the placeholder color in Ant Design's Select component?

Question

I want to change the placeholder color of Select component in Ant Design.

I've tried these below, but none of them work.

.ant-select-selection {
  :placeholder-shown {
    color: red !important;
  }
  &:placeholder-shown {
    color: red !important;
  }
  :::placeholder {
    color: red !important;
  }
  color: black !important;
  &::-webkit-input-placeholder {
    color: blue !important;
  }
  &:placeholder {
    color: blue !important;
  }
  :placeholder {
    color: blue !important;
  }
  ::-webkit-input-placeholder {
    color: blue !important;
  }
}

::-webkit-input-placeholder {
  color: blue !important;
}

Answer 1

I tried Hemanthvrm's suggestion, but it seems they changed the class name of the placeholder element to .ant-select-selection-placeholder in Ant Design 4. What worked for me was the following:

.ant-select-selection-placeholder {
  color: #f0f0f0;
}

Please mind there's an opacity: 0.4; by default on the placeholder element, so whatever color you use will look faded out.

Also mind this placeholder styling behavior is not consistent across different Ant components. For example, to style the placeholder of the date-range picker I had to do the following:

.ant-picker-input input::placeholder {
  color: #f0f0f0;
}

Bad news is, all these names might change again in a new major version. So better declare all the Ant related styles in one file, so your project becomes easily resilient to such changes.