Question

我有一个Material-ui选择组件，向用户显示选项的下拉列表。占位符文本显示为“选择选项”，以告诉用户选择所需的选项。这以浅灰色文本显示，但是由于文本颜色太浅，因此色盲人可能难以阅读。因此，我想使文本颜色变深，但不确定如何。如果可能的话，我不想让占位符成为下拉菜单中的选项之一。

select组件的代码为：

<Select 
  options = {options}
  isMulti
  placeholder= "Select Options"
  value = {this.selectedOptions"
  onChange={this.changeH}
  className = SelectOptionsDropDown
/>

.css文件中的样式为：

.SelectOptionsDropDown {
  text-align: center;
  margin: 10px;
 }

此样式完全有效

Answer 1

您可以使用::placeholder，如下所示：

.SelectOptionsDropDown::placeholder{
    color: red;
  }

请注意，IE不支持此功能，请选中here。

Answer 2

你能试试这个方法吗？

<Select
fullWidth
size="small"
displayEmpty
inputProps={{ 'aria-label': 'select' }}
value={age}
onChange={handleChange}/>
 <MenuItem value="" disabled>
    <em style={{color:"#9E9E9E"}}>Placeholder</em>
 </MenuItem>
 <MenuItem value={'A'}>Option A</MenuItem>
 <MenuItem value={'B'}>Option B</MenuItem>
 <MenuItem value={'C'}>Option C</MenuItem>
</Select>

在选择下拉菜单中更改占位符的文本颜色-Material-ui

2 个答案: