How to change placeholder color in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

Today, I am going to show you. how to change placeholder color in react js with code example.

To change placeholder color, put the #inputID::placeholder class in color: #ff0000; to change placeholder color of text input.

In this article, we will change placeholder color in react js just like you would create in a normal HTML project. Also, we will style it using normal CSS.

Let’s look at the following example to understand how it basically works:

import React, { useState } from 'react';
import "./App.css"
const App = () => {

  return (
    <div>
      <input type="text" id="inputID" placeholder="Your text here" />
    </div>
  )
}

export default App

Filename: App.css Now, let’s edit the file named App.css to style the placeholder color.

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

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Check the output of the above code example.

All the best 👍