【html5】input要素のplaceholderの色を変える

Category css, html5 2012/02/28

問題

placeholder=”検索” が見づらくなっちゃった。　色って変えれる？

　→

-moz-placeholder, -webkit-input-placeholder を使う。

:-moz-placeholder {
    color: #000000;
}
::-webkit-input-placeholder {
    color: #000000;
}

もうひとつ記述例（とっても twitter bootstrap っぽいですね）。

.navbar-search .search-query:-moz-placeholder {
    color: #444;
}
.navbar-search .search-query::-webkit-input-placeholder {
    color: #444;
}

ブラウザごとの対応状況がまちまちになってきて、大変ですね。