CSS | Đổi màu thuộc tính placeholder trong các trình duyệt

placeholder là thuộc tính mới của thẻ input mà HTML5 hỗ trợ, nó giúp ta viết chữ ẩn dưới một ô textbox. Chức năng này thường thấy ở các ô text tìm kiếm, form đăng nhập hoặc những nới có dòng chữ gợi ý mà sao khi click vào nó tự động biến mất. Firefox sử dụng mô hình khác so với Safari và Chrome, mỗi trình duyệt lại thể hiện thuộc tính "placeholder" theo kiểu riêng của mình.

 /* Muốn hiện trên tất cả các trình duyệt các bạn dùng mẫu sau */

::-webkit-input-placeholder { color:#f00; } /*Google Chrome */
::-moz-placeholder { color:#f00; } /* Firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* IE */
input:-moz-placeholder { color:#f00; }

/* Sử dụng cho Chrome | webkit*/

#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* Sử dụng cho Firefox | mozilla */

#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

VD:

<div id="vdsearchthis">
<form action="http://rumfy.blogspot.com/search" id="searchthis" method="get">
<input id="vd-b-query" name="q" placeholder="Tìm kiếm..." tabindex="3" title="Tìm kiếm" type="text" />
<a href="http://www.blogger.com/null" id="vd-b-query-icon" onclick="document.getElementById(" searchthis="" submit="" title="Tìm kiếm blog này"></a>
</form>
</div>
<style type="text/css">
 #vd-b-query::-webkit-input-placeholder { /* Chrome 21 */
    color: #FF0000;
}
#vd-b-query::-moz-placeholder { /* Chrome 21 */
    color: #FF0000;
}
#vd-b-query:-ms-input-placeholder { /* Chrome 21 */
    color: #FF0000;
}
#vd-b-query:-moz-placeholder {
    color: #FF0000;
}
</style>

Nếu bạn muốn khi click vào ô tìm kiếm mà màu chữ sẽ đổi sang màu khác thì các bạn thêm :focus trước các thuộc tính. Ví dụ như:

:focus::-webkit-input-placeholder { color:#f00; } /*Google Chrome */
:focus::-moz-placeholder { color:#f00; } /* Firefox 19+ */
:focus:-ms-input-placeholder { color:#f00; } /* IE */
input:focus:-moz-placeholder { color:#f00; }

Và ta sẽ thêm vào ví dụ trên đoạn CSS:

<style type="text/css">
#vd-b-query:focus::-webkit-input-placeholder { /* Chrome 21 */
color: #775F5F;
}
#vd-b-query:focus::-moz-placeholder { /* Chrome 21 */
color: #775F5F;
}
#vd-b-query:focus:-ms-input-placeholder { /* Chrome 21 */
color: #775F5F;
}
#vd-b-query:focus:-moz-placeholder {
color: #775F5F;
}
</style>

Demo: