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>
        <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"/>
            .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;
        <h2 class="text-center">Change placeholder color using CSS</h2>
        <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 class="form-group">
                    <label>Field 2</label>
                    <input class="form-control" type="text" placeholder="Field 2" />
                <div class="form-group">
                    <label>Field 3</label>
                    <input class="form-control" type="text" placeholder="Field 3" />
                <button class="btn btn-primary">Submit</button>

Free - Download it right now!


Include all files

Demo Download
$2 platform fee is required
Compatible Browsers

Chrome, Firefox, Safari, Opera, IE9+, Edge

Technologies Used


Reviews and Comments