Placeholder Color Change using CSS

byCodingFlicks -December 02, 2021

0

Hello Friends. How are you? Today we will learn how to change the color of the default placeholder of the input of the form according to our wish. We have already shared many front-end-related source codes in this blog. If you have time, you can take a look at them.

However, we see the form on more or less all the websites. It could be a login form, a registration form, or something else. The placeholder text in those forms has a specific color. If you want, you can easily change the color using simple CSS. However, when doing this, you need to keep in mind the browser compatibility.

First, We have created a simple form for this project. I have used two input elements in that. One is email and, the other is password. If you take a look at the picture above, you will understand that the color of the placeholder has been changed to darkorange color.

First, we styled the form using some basic CSS. In the next step, we have selected the placeholder selector so that we can set a color. Then for browser compatibility, I have given the same color to other pseudo-elements so that all browsers support it.

You May Also Like:

To create this project, you need to create two files. One of them is an HTML file and, the other is a CSS file. After creating two files, you have to add the CSS file to the HTML file. Copy the source code from the code box below and paste it into your project. If you have any problem with the following file, you can also download the source code from the button below.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--codingflicks.com-->
<head>
	<meta charset="UTF-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>How to Change Form Placeholder Color</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<form action="">
		<input placeholder="Your Email Here" type="email">
		<input placeholder="Your Password Here" type="password">
		<a href="#">Submit</a>
	</form>
</body>
</html>

ADD CSS:

body {
	padding: 0;
	margin: 0;
	display: grid;
	place-items: center;
	height: 100vh;
}
form input {
	width: 100%;
	margin-bottom: 30px;
	height: 50px;
	border: none;
}
form a {
	text-decoration: none;
	background: black;
	color: #fff;
	padding: 10px 30px;
	text-transform: uppercase;
	display: inline-block;
	text-align: center;
}
form {
	background: deepskyblue;
	padding: 80px;
}
form input {
	font-size: 20px;
	padding-left: 10px;
}
input[type="email"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder {
	color: darkorange;
}
input[type="email"]:-moz-placeholder, input[type="password"]:-moz-placeholder {
	color: darkorange;
	opacity: 1;
}
input[type="email"]::-moz-placeholder, input[type="password"]::-moz-placeholder {
	color: darkorange;
	opacity: 1;
}
input[type="email"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder {
	color: darkorange;
}
input[type="email"]::-ms-input-placeholder, input[type="password"]::-ms-input-placeholder {
	color: darkorange;
}
input[type="email"]::placeholder, input[type="password"]::placeholder {
	color: darkorange;
}

We hope you have successfully implemented the source code. This project was a basic project for beginners. We hope you enjoy this simple project and that you have learned something. Follow us on our social media for more projects like this. Please Help us grow by sharing our blog articles. One of your shares is very important to us. Thanks for being with us.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.