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 Download
Unlock Your Free Download for Just $2
Compatible Browsers

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

Technologies Used

HTML 5, CSS 3

Reviews and Comments