CODEWITHSUNDEEP
reactjs
bobb1213131
bobb1213131

Reputation: 287

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

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

enter image description here enter image description here

Upvotes: 15

Views: 28154

Answers (5)

Abdullah Belkaid
Abdullah Belkaid

Reputation: 41

For version 5.7.3, I changed it this way:

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

Upvotes: 2

ZiaUllahZia
ZiaUllahZia

Reputation: 1142

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

Upvotes: 9

tdphut
tdphut

Reputation: 94

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

Upvotes: 6

Oscar Saraza
Oscar Saraza

Reputation: 1191

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.

Upvotes: 25

jefferiestube
jefferiestube

Reputation: 141

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

Upvotes: 3

Related Questions