How to useCSS Styling in ReactJS
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}>w3wiki</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:
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 placeholder text, the CSS ::placeholder pseudo-element is primarily utilized. This handy pseudo-element enables us to style the placeholder text within an input field.
Syntax
::placeholder {
color: yourColorValue;
}