Set text input placeholder color in reactjs

reactjs styles placeholder
Mohammad Razeghi picture Mohammad Razeghi · Aug 12, 2016 · Viewed 23.4k times · Source

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

Timo picture Timo · Aug 12, 2016

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.

Related questions

MaterialUI Custom Hover Style

I'm a newbie here to React and I'm a little bit confused on how to override classes in Material UI. I took a look at the examples and tried to mimic it but it didn't seem to do what I …

Read More
React Native: Text and Icon inline

I am trying to aline a Icon and a Text inline and align the text to the left and the icon to the right... This is how it is looking at the moment: However, I want to have the text …

Read More
Adding transitions to styled components

I have following component in React: const Button = styled.div` width: 30px; height: 30px; position: absolute; right: 2em; top: 50%; transform: translateY(-50%); padding: 0; margin: 0; &::before, &::after { content: ""; position: absolute; background-color: #3d3935; transition: transform 0.25s ease-out; } &::before { top: 0; …

Read More