*

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

  関連記事

checkedセレクタを使用したタップしやすいチェックボックス

スマホサイトで見るフォームを作る際、どうやったらタップしやすいチェックボックスになるのか試してて作ってみました。

no image

wordpressでiOSデバイスとそれ以外の振り分け

PHPを使えるようにプラグインを入れたので、振り分けをしていきます。 で、振り分け方をここ2~3日悩み中だったのですが、

no image

NAVERフォトエディター

会社の人が教えてくれたwebサービス。 今までも画像加工するためのwebサービスはあったけど、 なんやらかんやら結構使い

no image

docomoのXHTMLでCSSをきかせる

また今更なメモです。 ※新しい機種は、これ入れなくても実機での確認はできてる様子? ++++++++++++++++++

キーボードショートカット

Dreamweaver8でZen-codingを使えるように設定する

会社のソフトがDreamweaver8で、てっきりCS3以降のものしかZen-coding対応してないものだと思ってたら

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

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

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

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