react-select, cannot change color of text in placeholder within text box

Question

Trying to set the color of the default select value to black but it doesn't work, i even put !important so it overrides any bootstrap colors that being overwritten by it. Any help is appreciated thank you.

const colourStyles = {
      control: styles => ({ ...styles, overflow: 'hidden', color: 'black !important',backgroundColor: this.state.selectedOption.value || '#32CD32', fontSize: 23,  paddingLeft: 'center', height:46}),
      singleValue: styles => ({ ...styles, color: 'black' }),
    }
<Select
 onChange={this.handleChange}
 options={optionsStatus}
 styles={colourStyles}
 placeholder= 'Status'
/>

Possible duplicate of [Change an HTML5 input's placeholder color with CSS](https://stackoverflow.com/questions/2610497/change-an-html5-inputs-placeholder-color-with-css) — Fabien Greard, Dec 06 '18 at 18:27

score 23 · Answer 1 · answered Jul 18 '19 at 00:57

You can update the placeholder styles using the same colourStyles object.

const colourStyles = {
    placeholder: (defaultStyles) => {
        return {
            ...defaultStyles,
            color: '#ffffff',
        }
    }
}

You can review the related documentation (https://react-select.com/styles#style-object) to check the keys available for styling.

score 8 · Answer 2 · answered Jan 31 '21 at 11:15

8

If someone is looking for changing text and style

<Select 
options={options} 
placeholder={<div className="select-placeholder-text">Select category</div>} 
/>

In the Stylesheet

.select-placeholder-text {
color: pink;
}

answered Jan 31 '21 at 11:15

ZiaUllahZia

1,072
2
16
30

score 6 · Answer 3 · answered Oct 31 '19 at 02:29

Another option is to override the default theme. According to react-select docs, the neutral50 response for placeholder's color. For example:

<Select
    onChange={this.handleChange}
    options={optionsStatus}
    styles={colourStyles}
    placeholder= 'Status'
    theme={theme => ({
        ...theme,
        colors: {
            ...theme.colors,
            neutral50: '#1A1A1A',  // Placeholder color
        },
    })}
/>

View on codesandbox

jefferiestube · Answer 4 · 2019-01-31T15:21:26.477

3

I just ran into this too. I kept trying to change ::placeholder in the css, but it seems to be rendered as actual text, not a pseudo-class. Here's what I found that worked. First, pass the prop classNamePrefix="react-select" to the component, and then select it in the css with:

.react-select__placeholder {
  color: black;
}

(And of course, you can make the classNamePrefix whatever you want).

edited Jan 31 '19 at 15:21

answered Jan 31 '19 at 14:20

jefferiestube

141
3
8

score 1 · Answer 5 · edited May 10 '23 at 14:02

1

For version 5.7.3, I changed it this way:

theme={(theme) => ({
            ...theme,
            colors: {
              neutral50: "#fff",
            },
          })}

edited May 10 '23 at 14:02

SpicyCatGames

863
7
25

answered May 04 '23 at 23:00

Abdullah Belkaid

11
1

react-select, cannot change color of text in placeholder within text box

5 Answers5