Welcome to today’s tutorial. in today’s tutorial how we can change the default color of the placeholder to any color of our choice. While doing this we have to take care of the browser compatibility of our code.
For this tutorial, we will be using HTML and CSS. The most important thing in this tutorial is the placeholder selector. Let us begin with the tutorial.
Video Tutorial:
I have a video version of this tutorial posted on my youtube channel. If you wish to code along, you can check out the video below.
Also, I post new tutorials on my channel every alternate day. So be sure to subscribe to my youtube channel.
Project Folder Structure:
Let us take a look at the project folder structure. The project folder is named – Changing Placeholder Color. Within this folder, we have two files. First is the HTML document – index.html, and the second is the stylesheet – style.css.
HTML:
We begin with the HTML code. Do copy the code below and paste it into your HTML file.
The HTML code consists of only an input element of type text. The input element has a placeholder attribute with value – ‘This is a demo placeholder’. You can use any text of your choice as the placeholder.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Change Placeholder Color</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<input type="text" placeholder="This is a demo placeholder" />
</body>
</html>
CSS:
Next, we code the CSS part. Now copy the code provided below and paste it into your stylesheet.
We first remove the unwanted margins and paddings from the document body. Next, we start styling the input element by setting the font-size to 25px. We also center it using transforms. Here please note that this styling is not necessary. You can style it however you would like to.
Other Tutorials You Might Like:
- Dictionary App Using HTML, CSS & Javascript
- Pure CSS Masked Emoji Art
- Disable Cut, Copy, Paste using Javascript
In the next step, we use the ::placeholder selector to select the placeholder and set a color to it. We also use the rest of the pseudo-elements and classes to provide browser compatibility.
body {
padding: 0;
margin: 0;
}
input[type="text"] {
font-size: 25px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
padding: 15px;
}
input[type="text"]::-webkit-input-placeholder {
color: #ff3485;
}
input[type="text"]:-moz-placeholder {
color: #ff3485;
opacity: 1;
}
input[type="text"]::-moz-placeholder {
color: #ff3485;
opacity: 1;
}
input[type="text"]:-ms-input-placeholder {
color: #ff3485;
}
input[type="text"]::-ms-input-placeholder {
color: #ff3485;
}
input[type="text"]::placeholder {
color: #ff3485;
}
That’s it for this tutorial. If you have any issues while coding this, you can download the source code by clicking on the download button below. Also, don’t forget to drop your feedbacks and suggestions in comments below.
