Thay đổi màu placeholder của input HTML5 bằng CSS

Giới thiệu

HTML5 có thuộc tính placeholder trên <input> và <textarea> gợi ý nội dung nhập.

Ví dụ cơ bản

<!DOCTYPE HTML>
<html>
    <body>
        <form action="/cgi-bin/html5.cgi" method="get">
            Enter email : <input type="email" name="newinput" placeholder="email@example.com"/>
            <input type="submit" value="submit" />
        </form>
    </body>
</html>

Đổi màu placeholder bằng CSS

<!DOCTYPE HTML>
<html>
    <style>
        ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
            color: #7F0D10;
        }
        :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
            color: #7F0D10;
            opacity: 1;
        }
        ::-moz-placeholder { /* Mozilla Firefox 19+ */
            color: #7F0D10;
            opacity: 1;
        }
    </style>
    <body>
        <form action="/cgi-bin/html5.cgi" method="get">
            Enter email : <input type="email" name="newinput" placeholder="email@example.com"/>
            <input type="submit" value="submit" />
        </form>
    </body>
</html>

Sử dụng pseudo-elements cho từng engine trình duyệt.