Set text input placeholder color in reactjs

Question

When using ordinary CSS if you want to style your place holder you use these css selectors :

::-webkit-input-placeholder {
    color: red;
}

But I can't figure out how to apply these type of styles in react inline styles.

Answer 1

Simply give your "input" tag an "id" or a "class" and put your css style in App.css inside src. e.g

//App.css or external stylesheet

#inputID::placeholder {
    color: #ff0000;
    opacity: 1;
}

//your jsx code
<input type="text" id="inputID" placeholder="Your text here" />

That actually worked for me.

Answer 2

You can't use ::-webkit-inline-placeholder inline.

It is a pseudo-element that (much like e.g. :hover) can only be used in your stylesheet:

The non-standard proprietary ::-webkit-input-placeholder pseudo-element represents the placeholder text of a form element.

Source

Instead, assign a class to the React component via the className property and apply the style to this class.