*

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

  関連記事

Windows版Safari5.1.7をダウンロードしたい→でも自己責任でお願いします

AppleがWindows版Safariの開発を終了してから、しばし経ちます。 「WindowsでSafariとか使わん

no image

Googlemapにリンクするときのパラメータ(2014年8月)

以前「Googlemapにリンクするときによく使いそうなパラメータ」って記事を投稿しましたけど、そういえばあれからパラメ

アメブロ管理画面

アメンバー限定公開のページをカスタマイズする

あんまり使わないかもですが備忘録。 アメンバー限定公開用のページがあんまりあっさりしてたのでカスタマイズの方法探してみま

SBI証券から確定拠出年金のIDとパスワードが届きました

去年の12月中旬に書類を提出して、そのままストップしてた確定拠出年金がようやく始まりそうです。 SBI証券から管理画面の

no image

パララックスサイトを制作時に便利よさげなプラグイン「skrollr.js」

今回は少し触る機会があったのでパララックスを作るときに便利よさげなプラグインをご紹介します。 使用するプラグインは「sk

コメントを残す

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


*

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

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

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

実は先月で退職しました

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

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

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

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