Set text input placeholder color in reactjs

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.

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.

Do not use ::-webkit-inline-placeholder inline and Radium for one placeholder.

I suggest go to your index.css

input.yourclassname::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: white;
  opacity: 1; /* Firefox */
}

My approach is to simply apply different styles to the entire <input /> component based on whether or not the value is empty. No need to install a new dependency, and no need to use a stylesheet which seems to be the point of the original question.

var inputStyles = {
    border: '1px solid #cbcbcb',
    color: '#525252',
};
var placeholderStyles = {
    ...inputStyles,
    color: '#999999',
};

<input
    type="text"
    placeholder="enter text here"
    value={myValue}
    style={myValue ? inputStyles : placeholderStyles}
/>

For me, I use Radium's Style component. Here's what you can do in ES6 syntax:

import React, { Component } from 'react'
import Radium, { Style } from 'radium'

class Form extends Component {
   render() {
      return (<div>
         <Style scopeSelector='.myClass' rules={{
            '::-webkit-input-placeholder': {
               color: '#929498'
            }}} />
         <input className='myClass' type='text' placeholder='type here' />
      </div>
   }
}

export default Radium(Form)

Use Template Literals i.e. Backward quotes(``) for adding your pseudo-element.

const inputFieldStyle = `
           .inputField::-webkit-input-placeholder{
                   color: red;
           }`

Using class is important thing so make sure you used class before pseudo-element.

Then you can use tag where you pass above style like below:

const reactFunctionalComponent = (props) => {
  ...
  return(
    <>
      <style>
        {inputFieldStyle}
      </style>
    ...
    </>
  )
}

Here is a method that provides pseudo selector functionality in React, without relying on a third party library, in about 20 lines of code.

This is an extension of RohitSawai's answer that injects a <style> tag, but in a more encapsulated and reusable fashion.

Define this function once in your project:

/** Returns a unique className and injectStyle function that can be used to 
style pseudo elements. Apply the className to the desired element and render 
injectStyle() nearby. The pseudo selector, e.g. ::-webkit-input-placeholder, 
will be appended to the unique className, styling a pseudo element directly, 
or a descendant pseudo element, as determined by the selector. */
const pseudo = (pseudoSelector, style) => {
  const className = `pseudo-${Math.floor(Math.random() * 1000000)}`

  // simple encoding of style dictionary to CSS
  // for simplicity, assumes that keys are already in slug case and units have 
  // been added, unlike React.CSSProperties
  const styleCSS =
    '{' +
    Object.entries(style)
      .map(([name, value]) => `${name}: ${value};`)
      .join('') +
    '}'

  return {
    className,
    injectStyle: () => (
      <style>
        {`.${className}${pseudoSelector} ${styleCSS}`}
      </style>
    )
  }
}

And use it like this:

const MyComponent = () => {
  const placeholder = pseudo('::-webkit-input-placeholder', { color: 'red' })

  return (<div>
    {placeholder.injectStyle()}
    <input className={placeholder.className} placeholder="This placeholder is red" />
  </div>)
}