CODEWITHSUNDEEP
javascriptmaterial-ui
Uciebila
Uciebila

Reputation: 511

Change text colour of placeholder in select drop down - Material-ui

I have a material-ui select component that presents a drop down of options to the user. The placeholder text shows as "select option" to tell the user to select the options they want. This is shown in light grey text, but because the text colour is so light it could be hard for colour blind people to read. Because of that I want to make the text colour darker but am not sure how. I don't want to make the placeholder one of the options within the dropdown if possible.

Code for the select component is: 

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

Styling within the .css file is:

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

This styling works fully

Upvotes: 0

Views: 7283

Answers (2)

Nidheesh Davis
Nidheesh Davis

Reputation: 19

Can you try this approch?

<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>

Upvotes: 1

shhdharmen
shhdharmen

Reputation: 1453

You can use ::placeholder, like below :

.SelectOptionsDropDown::placeholder{
    color: red;
  }

Please note, it's not supported in IE, check here.

Upvotes: 0

Related Questions