How To Change Placeholder Color In ReactJS ?
Last Updated :
06 Oct, 2023
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
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
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}/>
{ }
<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:
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
import React, { useState } from "react" ;
import "./App.css" ;
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
.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 {
background-color : red ;
}
|
Output:
Share your thoughts in the comments
Please Login to comment...