Change placeholder color using CSS
To change placeholder color using CSS use ::placeholder
selector. You also need to use :-ms-input-placeholder
and ::-ms-input-placeholder
for IE and Edge. Proper systax is available below also you can download source code from right side.
Source Code:
<!DOCTYPE html>
<html>
<head>
<title>Change placeholder color using CSS | MG</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="bootstrap.min.css" rel="stylesheet" type="text/css"/>
<style>
.form-control::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: red;
opacity: 1; /* Firefox */
}
.form-control:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: red;
}
.form-control::-ms-input-placeholder { /* Microsoft Edge */
color: red;
}
</style>
</head>
<body>
<h2 class="text-center">Change placeholder color using CSS</h2>
<hr/>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label>Field 1</label>
<input class="form-control" type="text" placeholder="Field 1" />
</div>
<div class="form-group">
<label>Field 2</label>
<input class="form-control" type="text" placeholder="Field 2" />
</div>
<div class="form-group">
<label>Field 3</label>
<input class="form-control" type="text" placeholder="Field 3" />
</div>
<button class="btn btn-primary">Submit</button>
</div>
</div>
</body>
</html>
Free - Download it right now!
Tested
Include all files
Demo DownloadUnlock Your Free Download for Just $2
Get updates!
Follow @themgtechnologyCompatible Browsers
Chrome, Firefox, Safari, Opera, IE9+, Edge
Technologies Used
HTML 5, CSS 3