フォームにplaceholder(プレースフォルダー)で文字を入れるとズレるのを解消する方法

2015年12月8日火曜日

facebook いいね! シェア

t f B! P L
フォームの中にデフォルトで文字を入れておきたい場合に使われるplaceholderタグ。

便利なのですが、ズレます。

解決方法としてはCSSでline-heightではなく、paddingを使うと良いそうです。

フォームの内の文字位置を整えるのにheightに合わせて、line-heightを指定する方法があります。
これをしないでpaddingで位置を整えると解決とのこと。

ただ、ぼくはline-heightを使いたかったので、別の方法を探してみたところ、以下でいけました。

input::-webkit-input-placeholder {
padding: 0 0 30px 0;
color: #666666;
}
input:-moz-placeholder {
padding: 0 0 30px 0;
color: #666666;
}

ただし、微調整があまりできなかったです・・・。

QooQ