検索バーなどを作る際に、入力ボックスにもともと表示されている文字を「placeholder（プレースホルダー）」といいます。
こちら、入力前はガイドのようにテキストを表示し、入力時に消えるという便利な機能です。

（表示例）

↓html

<input type="text" placeholder="検索">

こちらの「検索」という文字ですが、cssにてスタイルを変更することが可能です。
各ブラウザごとに記述が異なりますが、下記４種類でほぼカバーできます。

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

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