2015年12月8日火曜日

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

フォームの中にデフォルトで文字を入れておきたい場合に使われる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;
}

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

0 件のコメント:

コメントを投稿