computer-1185637_1280

検索バーなどを作る際に、入力ボックスにもともと表示されている文字を「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="&#xf002;">

(css)

input::-webkit-input-placeholder {
    font-family: "fontawesome";
}
input:-moz-placeholder {
    font-family: "fontawesome";
}
input::-moz-placeholder {
    font-family: "fontawesome";
}
input:-ms-input-placeholder {
    font-family: "fontawesome";
}

これでワンランク上の入力ボックスを実装可能です。