How to change placeholder color in html?
March 08, 2023Hi Friends 👋,
Welcome To aGuideHub! ❤️
To change the placeholder color in HTML, you can use ::placeholder with the color attribute, it will change the placeholder color for you all input.
TIP: TO change specific input placeholder color use #inputID::placeholder
See a short example of changing placeholder color using CSS.
::placeholder {
color: #ab34c5;
}
#inputID::placeholder {
color: #ab34c5;
}Today, In this article you will get two examples of changing placeholder color in HTML.
- Change the placeholder color of input in HTML
- Change the placeholder color of the bootstrap input
Let’s start the tutorial how to change placeholder color in HTML
Change placeholder color of HTML Input
In this example, We will change the placeholder color of html input element using ::placeholder css.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>HTML Inputs</title>
<style>
::placeholder {
color: #ab34c5;
}
#NumberInput::placeholder {
color: #78cc63;
}
</style>
</head>
<body>
<h1>
HTML Input placeholder color changes
</h1>
<input type="text" placeholder="Text Input" />
<input type="number" id="NumberInput" placeholder="Number Input" />
</body>
</html>Here, we are provided code sandbox links for the above program example of HTML input placeholder color change. Then you can use it whenever you want and make the changes as per your requirements.
Change placeholder color of bootstrap input
In this example, We will change the placeholder color of the bootstrap input element using .form-control::placeholder css.
Using .form-control::placeholder you can also manipulate the bootstrap input placeholder.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<style>
.form-control::placeholder {
color: #ab34c5;
}
#PasswordInput::placeholder {
color: #78cc63;
}
</style>
</head>
<body>
<form class="row" style="padding: 10px;">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input
type="email"
class="form-control"
placeholder="Email address"
aria-describedby="emailHelp"
/>
</div>
<div class="mb-3">
<label for="exampleInputPassword1" class="form-label">Password</label>
<input
type="password"
class="form-control"
id="PasswordInput"
placeholder="Password"
id="exampleInputPassword1"
/>
</div>
</form>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"
></script>
</body>
</html>Here, we are provided code sandbox links for the above program example of change bootstrap input placeholder color. Then you can use whenever you want and do the changes as per your requirements.
All the best 👍
