*

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

大塚商会のアルファメールプラチナにwordpressをインストール

大塚商会のアルファメールに苦戦したので、今後のために残しておきます。 まず、大前提としてなのですが プラチナの場合、wo

no image

ドラえもん素敵っす

素直にすごいなぁ〜と思いました。 画像を一切使わずにCSS3だけでドラえもんを描いてみた! CSS3かぁ。。やっとかない

no image

家計簿アプリ

家計簿アプリ、しばらく自前のgoogleのspreadseat使ってたんだけど、今日からiXpenseltの無料版使って

no image

同一html内でPC用とスマホ用の振り分けのjs

よく使いそうな感じのメモです。 メディアクエリではなくて単純に振り分けです。

no image

前回に引き続き、facebookページ作成の際の変更点などをメモ(2011年12月現在)

前回に引き続き、facebookページ作成の際の変更点などをメモ。 ■facebookページでスクロール非表示に使う「F

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

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

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

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