วิธีเปลี่ยนสี Placeholder ของ Input HTML5 ด้วย CSS

ภาพรวม

HTML5 Attribute placeholder ให้คำแนะนำใน Input Field การเปลี่ยนสี Placeholder ต้องใช้ Pseudo-elements แบบ Vendor-specific

Syntax พื้นฐาน

/* WebKit/Blink (Chrome, Edge, Safari, Opera) */
::-webkit-input-placeholder { color: #7F0D10; }

/* Mozilla Firefox 4-18 */
:-moz-placeholder { color: #7F0D10; opacity: 1; }

/* Mozilla Firefox 19+ */
::-moz-placeholder { color: #7F0D10; opacity: 1; }

/* Internet Explorer 10-11 */
:-ms-input-placeholder { color: #7F0D10; }

/* Microsoft Edge (Legacy) */
::-ms-input-placeholder { color: #7F0D10; }

/* Standard (Future/Modern) */
::placeholder { color: #7F0D10; }

ตัวอย่างครบถ้วน

<!DOCTYPE html>
<html>
<head>
<style>
    /* รวมทุก Browser Engine */
    ::-webkit-input-placeholder { color: #7F0D10; }
    :-moz-placeholder { color: #7F0D10; opacity: 1; }
    ::-moz-placeholder { color: #7F0D10; opacity: 1; }
    :-ms-input-placeholder { color: #7F0D10; }
    ::-ms-input-placeholder { color: #7F0D10; }
    ::placeholder { color: #7F0D10; } /* Modern Standard */

    /* Style เพิ่มเติม */
    input[type="email"] {
        padding: 10px;
        border: 2px solid #ccc;
        border-radius: 4px;
        font-size: 16px;
        width: 300px;
    }
    input[type="email"]:focus {
        border-color: #7F0D10;
        outline: none;
    }
</style>
</head>
<body>
    <form action="/submit" method="get">
        <label for="email">Enter email: </label>
        <input type="email" id="email" name="email" placeholder="email@example.com" />
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

การจัดการ Opacity ใน Firefox

Firefox ตั้งค่า opacity: 0.54 ให้ Placeholder โดย Default ต้องตั้ง opacity: 1 เพื่อให้สีแสดงเต็มที่

::-moz-placeholder { opacity: 1; }
:-moz-placeholder { opacity: 1; }

การ Style เพิ่มเติม (Advanced)

/* เปลี่ยน Font Style */
::placeholder {
    color: #999;
    font-style: italic;
    font-size: 0.9em;
    text-transform: uppercase;
}

/* ต่างสีต่อ Input */
#username::placeholder { color: #e74c3c; }
#email::placeholder { color: #3498db; }
#password::placeholder { color: #2ecc71; }

/* Placeholder ใน Textarea */
textarea::placeholder { color: #999; }

Browser Support

สรุป

ใช้ Selector ครบทุก Engine รวมถึง Standard ::placeholder และตั้ง opacity: 1 สำหรับ Firefox