*

placeholderを指定したときにAndroidでテキスト表示位置を中央にしたい

   

スマホサイト作ってた時にハマったことがあったのでメモです。

現象:
placeholderを設定した際、iPhoneでは特に問題なく閲覧できるのですが
Androidで確認すると、placeholderのテキスト位置がやや上に表示される。
placeholder

で、下のような参考サイトを見つけたのですが…
androidのplaceholderがずれる件

ポイントはinput部分の余白を「line-height・height」で指定してるか「padding」で指定しているかということらしい。
で、「padding」で指定した方がいいですよ~ということみたいです。

だがしかし、私の場合、この時点で「line-height・height」での指定はしてないし、「padding」で指定してるし。。
こんな感じ↓

//inputのCSS
.content input[type="text"]{
	-webkit-appearance:none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size:14px;
	padding:6px 6px;
}

このときform用のCSSは別で切り分けて、他のCSSからの影響は受けないと思っていたのですが、どうしてもわからなかったので「line-height:1;」を追加して調整しました。

//inputのCSS
.content input[type="text"]{
	-webkit-appearance:none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	font-size:14px;
	//調整部分↓
	line-height:1;
	padding:10px 6px 6px;
}

とりあえず「line-height:1;」を追加したらiPhoneとAndroidで同じ表示になったので、やはり他のCSSから影響を受けていたのか…(だが記述を見つけきれず汗)
一応表示としてはおかしくないので今回はそれで解決としました。
今のところ「placeholder」使ったときに「padding」で位置調整ができないときは「line-height」も調整した方がよいみたい…という結論になってます。

 -Web

Sponsored link

Sponsored link

  関連記事

no image

evernoteの改行削除なおったんすか?

世間的に大絶賛の「EVERNOTE」。 EVERNOTE 自分一度使ってみたけどすぐ使わなくなりました。 なんでかいうと

山口一日目・セミトラのtFont展示

山口のYCAMにて、セミトラのtFont展示とトークショーを見に行く。 展示のスタジオの壁一面にフォントが映されてて、

達人記念

iPhoneアプリの湯切り名人で達人とれたぞ記念。 さらに上には仙人とやらがあるらしい。

WebデザイナーもiPhoneアプリ作れるとな。

http://appliya-inc.com/ja/oem/ プログラムがわかんなくてもアプリ作れちゃう時代がくるらしい

Thunderbirdのアドオン「QuickText」のテンプレが消えた?時の対処法

後で調べたら、QuickTextで割とよく見られる問題?のようですが、私は今回初めての体験だったので焦りました。 私の場

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*

共働きの30代女性。
福岡でWebに携わってます。
主に自分用の細かいメモを書いてます。
細かい内容が多いですが、他の方にも役立つなら幸いです。

ブログの記事を紹介していただきました

このブログ更新するの、約1年ぶりか(汗) すごいお久しぶりです。 このブログを始めてもう地味に10年くらい経つのですが(

確定拠出年金、退職したときに行う手続き(継続するor掛金停止する)

私、昨年から確定拠出年金をしております。 会社には確定拠出年金の制度がなかったので、「個人型年金」の加入者として掛金の拠

実は先月で退職しました

だいぶブログさぼっておりましたが、実は先月末で会社を退職しました。 別にこの歳になって、自主退職したわけじゃないのです。

  • ブログランキング・にほんブログ村へ