How to change placeholder color in react js?

Hi Friends 👋,

Welcome To aGuideHub! ❤️

To change the placeholder color in react js, you can use ::placeholder with the color attribute, it will change the placeholder color for you all input.

TIP: TO change specific input placeholder color use #inputID::placeholder

See a short example of change placeholder color using CSS.

::placeholder {
  color: #ab34c5;
}

#inputID::placeholder {
  color: #ab34c5;
}

Today, In this article you will get two examples of change placeholder color in react js.

1. Change the placeholder color of the input
2. Change the placeholder color of mui textfield

Let’s start the tutorial how to change placeholder color in react js

Change placeholder color of React Input

In this example, We will change the placeholder color of react input element using ::placeholder css.

APP.js

import React from "react";
import "./styles.css";
const App = () => {
  return (
    <div>
      <input type="text" id="inputID" placeholder="Color Placeholder" />
    </div>
  );
};

export default App;

styles.css

::placeholder {
  color: #ab34c5;
}

Here, we are provided code sandbox links for the above program example of react input placeholder color changes. Then you can use it whenever you want and make the changes per your requirements.

Try it Yourself

Change placeholder color of MUI textfield

In this example, We will change the placeholder color of mui textfield element using the InputLabelProps attributes.

Using the InputLabelProps prop you can directly write css for label or mui textfield placeholder color using sx.

APP.js

import * as React from "react";
import Box from "@mui/material/Box";
import TextField from "@mui/material/TextField";

export default function BasicTextFields() {
  const [num, setNum] = React.useState();
  return (
    <Box component="form">
      <TextField
        type="number"
        id="outlined-basic"
        label="Outlined"
        variant="outlined"
        onChange={(e) => setNum(e.target.value)}
        value={num}
        InputLabelProps={{
          sx: {
            color: "#84ac83"
          }
        }}
        style={{ minWidth: "500px" }}
      />
    </Box>
  );
}

Here, we are provided code sandbox links for the above program example of change material ui input placeholder color. Then you can use it whenever you want and make the changes per your requirements.

Try it Yourself

All the best 👍