Placeholder Color Change using CSS

byCodingFlicks -December 02, 2021

0

Change Input Placeholder Color using HTML and CSS

Today's blog post is about changing the CSS placeholder color. We will learn how to change the color of the default placeholder of the form's input according to our wishes. We have already shared many front-end-related source codes in this blog. If you have time, take a look at them.

We see forms on more or less all websites. It can be a login form, a registration form, or something else These forms have a specific color for the placeholder text. You can change the color using simple CSS if you want. However, while doing this, you need to keep browser compatibility in mind.

First, we created a simple form for this project. We used two input elements in it. One is the email input field and the other is the password input field. If you look at the image above, you will notice that the color of the placeholder has been changed to deepskyblue.

Video Tutorial:

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

You May Also Like:

To create this CSS Placeholder Color change 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 Input 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;
    background: #080808; 
}
form input {
	width: 100%;
	margin-bottom: 30px;
	height: 50px;
	font-size: 15px;
	padding-left: 10px;
	background: transparent;
	border-color: deepskyblue;
	letter-spacing: 2px;
}
form a {
	text-decoration: none;
	background: deepskyblue;
	color: #fff;
	padding: 10px 30px;
	text-transform: uppercase;
	display: inline-block;
	text-align: center;
}
form {
	padding: 80px;
}

/* color one */

input[type="email"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder {
	color: white;
}
input[type="email"]:-moz-placeholder,
input[type="password"]:-moz-placeholder {
	color: white;
	opacity: 1;
}
input[type="email"]::-moz-placeholder,
input[type="password"]::-moz-placeholder {
	color: white;
	opacity: 1;
}
input[type="email"]:-ms-input-placeholder, 
input[type="password"]:-ms-input-placeholder {
	color: white;
    opacity: 1;
}
input[type="email"]::placeholder,
input[type="password"]::placeholder {
	color: white;
    opacity: 1;
}

/* color two */

input[type="email"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder {
	color: deepskyblue;
}
input[type="email"]:-moz-placeholder,
input[type="password"]:-moz-placeholder {
	color: deepskyblue;
	opacity: 1;
}
input[type="email"]::-moz-placeholder,
input[type="password"]::-moz-placeholder {
	color: deepskyblue;
	opacity: 1;
}
input[type="email"]:-ms-input-placeholder, 
input[type="password"]:-ms-input-placeholder {
	color: deepskyblue;
}
input[type="email"]::placeholder,
input[type="password"]::placeholder {
	color: deepskyblue;
}

We hope you have successfully implemented the source code. This project was a basic project for beginners. Hundreds of source codes are available on our website. If you want to get them, you need to go to our homepage and click on the Load More button there.We hope you enjoyed this simple project and learned something from it. Follow us on our social media for more projects like this. Help us grow by sharing our blog articles. Thanks for visiting our website.

DOWNLOAD CODE

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