to topto bottom

モバイルファースト時代のマルチデバイス対応を確実・簡単に

検証の現場から(2014年8月)

最近検証したWebサイトで次のような問題事例を発見しました

テキストボックスのプレースホルダーが上寄りで表示されてしまう

placeholderプレースホルダーとは、テキストボックスに入力する内容について「ヒントを与える」ため、ボックス内に薄い灰色で表示されるテキストのことです。 そのテキストがボックスの縦位置に対して中央に表示されることが期待動作でしたが、右図のようにいくつかの端末(注1)で上寄りに表示されてしまうケースがありました。

原因は、行の高さを指定するプロパティ line-height にあるため、ボックスの高さに対して line-height や padding を調節することで回避することが可能なようです。 最新OSである Android 4.4 においても本事象が発生する端末(注2)があるので placeholder 属性を使用してサイトを作成する場合は今後も注意が必要となります。

注1:Android 3系、4系、iOS 5系 で本事象が発生することを確認しています。 Android 1.6、2系、iOS 4系、6系、7系では発生していません。また Android 4系であっても、Chrome ブラウザまたは Samsung 製の機種に搭載されている S Browser では発生しておりません。

注2:Android 4.4 では、SO-03F などのSONY製端末で本事象が発生することを確認しています。

■問題再現時のコード

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
<!--
.placeholder {
    height: 45px;
    line-height: 35px;
    font-size: 16px;
    padding : 7px;
    border:solid 1px;
}
-->
</style>
</head>
<body>
<input type="text" class="placeholder" value="" placeholder="プレースホルダー">
</body>
</html>
このエントリーをはてなブックマークに追加