• I am new to react select.
• I am trying to style my placeholder using css
• so I build a prototype in sandbox.
• and I tried to change the color of the placeholder using css.
• I gave the color as red, but still not overwriting
• can you tell me how to fix it.

• providing my sandbox and code snippet below.

• even I googled for placeholder css, got this link but still not helping me

.asp

<Select
    defaultValue={""}
    label="Single select"
    placeholder={" Placeholder test "}
    options={flavourOptions}
    theme={theme => ({
      ...theme,
      borderRadius: 0,
      colors: {
        ...theme.colors,
        primary25: "hotpink",
        primary: "black",
        background: "red",
        color:"red",
      }
    })}
  />

• I am new to react select.
• I am trying to style my placeholder using css
• so I build a prototype in sandbox.
• and I tried to change the color of the placeholder using css.
• I gave the color as red, but still not overwriting
• can you tell me how to fix it.

• providing my sandbox and code snippet below.

• even I googled for placeholder css, got this link but still not helping me

https://www.w3schools./cssref/sel_placeholder.asp

https://codesandbox.io/s/react-codesandboxer-example-1q8nd

<Select
    defaultValue={""}
    label="Single select"
    placeholder={" Placeholder test "}
    options={flavourOptions}
    theme={theme => ({
      ...theme,
      borderRadius: 0,
      colors: {
        ...theme.colors,
        primary25: "hotpink",
        primary: "black",
        background: "red",
        color:"red",
      }
    })}
  />

• javascript
• html
• css
• reactjs
• redux

Share Improve this question Follow asked Dec 13, 2019 at 0:55 user12496915user12496915

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

According to react-select docs, the neutral50 response for placeholder's color.

Try this:

<Select
  defaultValue={""}
  label="Single select"
  placeholder={" Placeholder test "}
  options={flavourOptions}
  theme={theme => ({
    ...theme,
    borderRadius: 0,
    colors: {
      ...theme.colors,
      neutral50: 'red',  // Placeholder color
    }
  })}
/>

Or you can do simply as below:

export default () => {
  return (
    <div>
      <p>
        We see that the final rendered output is not an input box, but rather a
        set of divs with certain classes applied on them... so we just change
        the class
      </p>
      <Select
        defaultValue={""}
        label="Single select"
        placeholder="Placeholder test"
        styles={colorStyles}
        options={flavourOptions}
      />
    </div>
  );
};

const colorStyles = {
  placeholder: defaultStyles => {
    return {
      ...defaultStyles,
      color: "blue"
    };
  }
};

Check this example: Example

The placeholder is actually a div, so you can style it via CSS in the following way:

.css-1wa3eu0-placeholder {
  color: red !important;
}

p {
  color: blue;
}

.myDiv > div:nth-child(2) > div > div > div:nth-child(1) {
  font-size: 9px;
  color: orange !important;
}

plete working example here