【css3】inputタグに事前に薄く文字を表示させる方法

お問い合わせフォーム等で入力欄に事前に文字が入っているのを見たことありますか？

あれが入っていると相手としては何を入力すればよいのかわかりやすいので、是非導入したい！

HTML5だと実は簡単に導入できます。
inputタグに下記を加えます。

<input type="text" placeholder="入れたい語句" />

こちらで問題なく表示されます。簡単！！
ただIE8以下は対応してくれてないので、jquery.ah-placeholder.jsを事前に読み込んでおいて下記を記載します。

<script type="text/javascript">
$(function() {
  $('[placeholder]').ahPlaceholder({
    placeholderColor : 'silver',
    placeholderAttr : 'placeholder',
    likeApple : true
  });
});
</script>

「[placeholder]」としてある部分はセレクタなので、使用する環境に合わせて変更しましょう。上記の例の場合は、「placeholder をもつ要素」という指定の仕方をしています。これは後述する placeholderAttr オプションに placeholder を指定している関係上、そうするのが一番楽だから。

placeholderColor ： [プレースホルダテキストの文字色（初期値： silver）]
likeApple : [Mac っぽい挙動に（初期値： false）]
上記の 2つは初期値のままでも問題ないので特に書かなくても大丈夫。なお、likeApple オプションを「true」にすると、Mac 版 Safari のようにフォーカス時点ではプレースホルダが消えず、入力をはじめると消えるという挙動になります。

大事なのは placeholderAttr オプション。

placeholderAttr ： [プレースホルダに使用する属性（初期値： title）]
ここの値を「placeholder」にすることで、placeholder 属性の値を使用して ah-placeholder.js が動作し、さらに placeholder 属性に対応している環境では処理が自動的に中断されます。

参考・引用：placeholder 属性と jQuery で IE にもプレースホルダを

これでIE8以下もOKです！

CSSで色を変えたり位置を調整することも可能です。

/*各ブラウザ用に2行*/
input::-webkit-input-placeholder {padding-left: 5px;}
input:-moz-placeholder {padding-left: 5px;}

簡単に導入できました！！