web-dev-qa-db-ja.com

iOS 5.0 Safariがテキストボックスのプレースホルダーを垂直方向に中央揃えしない

入力テキストボックスに入力したテキストをページの垂直方向の中央に配置したい。

これを実現する一般的な方法は、行の高さと高さを等しく設定することです。これはiOS 5.0より前のSafariで動作します。

しかしながら; iOS 5では、Safariは入力されたテキストを垂直方向の中央に表示します...しかし、プレースホルダーテキストとカーソルは上揃えで表示されます。

.txtBox {
    line-height: 3em;
    height: 3em;
}

<input type="text" class="txtBox" placeholder="Name"></input>

この問題に直面している他の誰か？

cssios5mobile-safarivertical-alignmentplaceholder
28
Nirmal Patel

設定line-height: 1;はこれを修正しているようです。

35
Jesse

私にとって、テストしたすべてのブラウザー（Chrome、FF、Safari（+ iOS）、IE10）でほぼ完璧に見えるソリューションは1つだけです。

line-height: normal;

line-height: 100%やline-height: 1;などのソリューションは、特にChromeでは、入力の上部に配置されているようです。

http://jsfiddle.net/5Vc3z/

比較：

http://jsfiddle.net/5Vc3z/1/

36
Marcel

行の高さにはパーセンテージを使用する必要があります。

.txtBox {
       line-height: 100%;
       height: 3em;
    }
<input type="text" class="txtBox" placeholder="Name"></input>
8
andychukse

入力フィールドを大きく表示しようとしているだけだとすると、paddingを使用できます。

.txtBox {
    font-size: 1em;
    padding: 1em auto;
}

また、入力フィールドは次のようになります。

<input type="text" class="txtBox" placeholder="Name" />

編集する

すみません、少し時間がかかりました。 placeholderは個別にスタイルを設定したり、親からスタイルを継承したりできるようです。残念ながら、現時点ではSafariでサポートされていないスタイルがかなりあります。

次のブログには、特定のブラウザでサポートされている/サポートされていないスタイリング手法に関する詳細があります。

http://blog.ajcw.com/2011/02/styling-the-html5-placeholder/

2
My Head Hurts

私は使用しているにもかかわらず、この問題に長い間行き詰まっています

input::-webkit-input-placeholder { line-height:normal!important; }

Input要素にline-heightを単独で持つと、私のinput :: webkit-input-placeholder line-heightが壊れていました。

ソリューション拡張：

入力スタイルの行の高さを削除して、問題を修正しました。

0
Ariella