How To Change Placeholder Color In ReactJS ?

In this article, we’ll explore two different approaches to changing the placeholder color in ReactJS.

To change the color of the place­holder text, the CSS ::plac­eholder pseudo-element is primarily utilized. This handy pseudo-element enables us to style the place­holder text within an input field.

Syntax

::placeholder {
    color: yourColorValue;
}

Prerequisites

• Introduction to React
• React Components
• ReactJS Hooks
• NPM or NPX

Steps to Create React Application

Step 1: Create a react application by using this command

npx create-react-app placeholderApp

Step 2: After creating your project folder, i.e. placeholderApp, use the following command to navigate to it:

cd  placeholderApp

Project Structure

The project structure will look like this.

Approach 1: Using CSS Styling

In this approach, it sets the placeholder text color to crimson using an inline <style>;. The result is a centered input field with a green title and a crimson placeholder color.

Example: This example shows the use of the above-explaned approach.

Javascript

// App.js file

import React from "react";
const App = () => {
    const containerStyle = {
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        marginTop: "20px",
    };

    const titleStyle = {
        fontSize: "24px",
        color: "green",
    };
    const inputStyle = {
        width: "250px",
        height: "40px",
        padding: "10px",
        fontSize: "16px",
        border: "2px solid green",
        borderRadius: "15px",
        outline: "none",
    };

    return (
        <div style={containerStyle}>
            <h2 style={titleStyle}>Geeksforgeeks</h2>
            <input
                type="text"
                placeholder="Enter your text here"
                style={inputStyle}/>

            {/* Styling for the placeholder color */}
            <style>
                {`
                    ::placeholder {
                        color: crimson;
                    }`
                }
            </style>
        </div>
    );
};

export default App;

Steps to run:

To open the application, use the Terminal and enter the command listed below.

npm start

Output:

Approach 2: Using Conditional Rendering

In the approach for modifying the color of place­holder text in React, we use state to track a condition (for example, a button click). Based on this condi­tion, they dynam­ically assign a CSS class to the input element, thereby altering the color of the place­holder text.

Example: This example shows the use of the above-explained approach.

Javascript

// App.js

import React, { useState } from "react";
import "./App.css"; // Import your CSS file

const App = () => {
    const [isRed, setIsRed] = useState(false);

    const togglePlaceholderColor = () => {
        setIsRed(!isRed);
    };

    return (
        <div className="container">
            <h2 className="heading">Geeksforgeeks</h2>
            <input
                type="text"
                placeholder="Enter your text here"
                className={`input ${
                    isRed ? "red-placeholder" : ""
                }`}/>

            <button
                className="button"
                onClick={togglePlaceholderColor}>
                Toggle Placeholder Color
            </button>
        </div>
    );
};

export default App;

CSS

/* App.css file*/

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.heading {
    font-size: 34px;
    color: green;
}

.input {
    width: 250px;
    height: 40px;
    padding: 10px;
    font-size: 16px;
    color: #333;
    border: 2px solid green;
    border-radius: 15px;
    outline: none;
}

.red-placeholder::placeholder {
    color: red;
}

.button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
    background-color: #0074d9;
    color: #fff;
    margin-top: 10px;
}

.red-button {
      /* Red button color when condition is met */
    background-color: red;
}

Output: