Question

我想在Ant Design中更改Select组件的占位符颜色。

我在下面尝试过这些方法，但是它们都不起作用。

.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

我尝试了Hemanthvrm的建议，但似乎他们在Ant Design 4中将占位符元素的类名更改为.ant-select-selection-placeholder。对我有用的是：

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

请注意，默认情况下，占位符元素上有一个opacity: 0.4;，因此无论您使用什么颜色，都会看起来淡出。

还请注意，此占位符样式行为在不同的Ant组件之间不一致。例如，要为日期范围选择器的占位符设置样式，我必须执行以下操作：

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

坏消息是，所有这些名称可能会在新的主要版本中再次更改。因此，最好在一个文件中声明所有与Ant相关的样式，这样您的项目就可以轻松应对此类更改。

Answer 2

这将起作用

.ant-select-selection__placeholder{
  color : blue;
}

工作样本 https://codesandbox.io/s/139lnkwwm3

Answer 3

我本人希望将其设置为黑色而不是灰色，所以确实使用了简单的技巧，将其设置为defaultValue而不是占位符，后者默认情况下具有黑色，并且更易于操作CSS。

如何在Ant Design的Select组件中更改占位符颜色？

3 个答案: