*

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

  関連記事

wordpressでcolorboxを使用した際、スマホでも画像表示を最適化する方法

自分のblogをちまちまリニューアルさせて2ヶ月くらいでしょうか。 久しぶりにスマホで見たら、記事に投稿してる画像の表示

GoogleとYahoo!の電話コンバージョンタグの設定、番号が複数ならクリックイベントも設定

設定したことなかったので、電話コンバージョンタグの設定をメモっておきます。 ※タグの取得についてはやってないので、他の方

4.0にアップデート

iPhone4は買ってないけど、4.0にアップデート。 新機能は全然使い倒してないけど、フォルダ分けできるのは便利ですね

jquery mobile デモページ

そろそろjquery mobile触っておくべき?

ふと思い立ったので、そろそろ触っておくべきか?ということでjquery mobileを触ってみました。 簡単にメモ。 デ

no image

パスコード画面でフリーズ(iPhone)

iPhoneが急に不調になりました。。 2日程前から急にメール入力してるときに固まって落ちたりしてたんですが、何度か再起

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

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

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

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