検索バーなどを作る際に、入力ボックスにもともと表示されている文字を「placeholder(プレースホルダー)」といいます。
こちら、入力前はガイドのようにテキストを表示し、入力時に消えるという便利な機能です。
(表示例)
↓html
<input type="text" placeholder="検索">
こちらの「検索」という文字ですが、cssにてスタイルを変更することが可能です。
各ブラウザごとに記述が異なりますが、下記4種類でほぼカバーできます。
input::-webkit-input-placeholder
input:-moz-placeholder
input::-moz-placeholder
input:-ms-input-placeholder
簡単な例として文字色や太さを変更する場合、下記のように記載します。
(表示例)
↓css
input::-webkit-input-placeholder { color: red; font-weight: bold; } input:-moz-placeholder { color: red; font-weight: bold; } input::-moz-placeholder { color: red; font-weight: bold; } input:-ms-input-placeholder { color: red; font-weight: bold; }
この際に、注意が必要なのですが、すべてのブラウザにて同じスタイルを適用するからと、以下のようにまとめて記載するとなぜか適用されません。
↓css・悪い例
input::-webkit-input-placeholder, input:-moz-placeholder, input::-moz-placeholder, input:-ms-input-placeholder { color: red; font-weight: bold; }
また、「検索」という文字でなくアイコンフォントも利用可能です。
placeholderには「unicode」を入力し、cssで「font-family」を指定します。
(表示例)
↓html
<input type="text" placeholder="">
↓css
input::-webkit-input-placeholder { font-family: 'Line Awesome Free'; font-weight: 900; } input:-moz-placeholder { font-family: 'Line Awesome Free'; font-weight: 900; } input::-moz-placeholder { font-family: 'Line Awesome Free'; font-weight: 900; } input:-ms-input-placeholder { font-family: 'Line Awesome Free'; font-weight: 900; }
これでワンランク上の入力ボックスを実装可能です。