web-dev-qa-db-ja.com

16pxより大きいプレースホルダーのフォントサイズ

HTML5の::-webkit-input-placeholderを使用した入力フィールドのプレースホルダーのスタイル設定に関する記事をいくつか読みました。 1つの点を除いて、完全に機能します。

Font-sizeを16pxよりも大きい値に拡大しようとすると、テキストが下部で「カット」されます。これは、入力自体の高さとパディングに関係なく発生します。純粋なCSSまたはJavaScriptを使用して、この問題を回避する方法を知っている人はいますか？

プレースホルダーのフォントサイズが20ピクセルの2つの入力フィールドのスクリーンショットを追加しました

enter image description here

Jsfiddle： https://jsfiddle.net/bvwdg86x/

csshtml5placeholder
28
Valdemar Edvard Sandal Rolfsen

入力とそのプレースホルダーには、一致するフォントスタイルが必要です

input {
    width: 400px;
    padding: 0 20px;
}

input,
input::-webkit-input-placeholder {
    font-size: 20px;
    line-height: 3;
}
<input type="text" placeholder="My Cool Placeholder Text">
56
gfullam

プレースホルダースタイルは入力フィールドのサイズを変更せず、そのボックスモデルに影響しません。入力にfont-sizeを追加して、プレースホルダーが途切れないようにします。

また、他のブラウザのプレースホルダースタイルを追加することも検討してください...

::-moz-placeholder {} /* Firefox 19+ */
:-moz-placeholder {}  /* Firefox 18- */
:-ms-input-placeholder {} /* IE */
13
Dave O'Brien
input {
    width: 450px;
    padding: 0px 15px;
}

input,
input::-webkit-input-placeholder {
    font-size: 25px;
    line-height: 4;
}
<input type="text" placeholder="My Cool Placeholder Text">
0
imnik18

一方、ブラウザベンダーは::placeholder CSS擬似要素。

ブラウザの互換性の現在の状態は caniuse.com で確認できます。

現在（2019-04-29）次の注意事項があります：

::-webkit-input-placeholder for Chrome/Safari/Opera（ Chrome issue＃623345 ）

::-ms-input-placeholder for Edge（webkitプレフィックスもサポート）

0
WoIIe