SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

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

問題

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;
}

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

参考

https://developer.mozilla.org/ja/CSS/%3A-moz-placeholder

関連するメモ

コメント