html - テキスト入力フィールドの左上からテキストが始まらない

Question

高さが固定された入力フィールドがあります。テキストは垂直方向に中央揃えになっていますが、入力の左上に配置したいです。

CSS

.wideInput{
    text-align: left;
    padding:  0.4em;
    width: 400px;
    height: 200px;
}

HTML

<input class="longInput" value="<?php echo $row['foodPrice']; ?>" />

問題を示すjsFiddleは次のとおりです> http://jsfiddle.net/9cR5j/

score 10 · Accepted Answer

inputなぜあなたがしようとしないのではなくtextarea？

<textarea class="longInput" cols="30" rows="10"></textarea>

左上隅からテキストを追加します。

score 4 · Accepted Answer

それよりも削除padding: 0.4em;して設定する場合

padding-left:0;
padding-top:0;
padding-bottom:0.4em;
padding-right: 0.4em;

ここで変更クラス名を変更した後

<input class="wideInput" value="<?php echo $row['foodPrice']; ?>" />

代わりlongInputにwideInput

アップデート

これはテキストエリアでのみ機能します。入力は1行に値を入力できるためです。つまり、入力キーが許可されていないか、長いテキストをラップしないため、1行にデータを追加するだけです

score 1 · Accepted Answer

左と上を揃えるには、高さを小さくし、下にパディングを設定する必要があります。

text-align: left;
padding:  0.4em;
padding-bottom:190px;
width: 400px;
height: 10px;

score 1 · Accepted Answer

パディングにより、テキストが左側から 0.4em 開始されます。テキストを完全に左揃えにする場合は、左側のパディングを削除します。

.wideInput{
    text-align: left;
    padding: 0.4em 0.4em 0.4em 0;
    width: 400px;
    height: 200px;
}

score 0 · Accepted Answer

line-heightフィールドのCSS プロパティをそのinputフィールドのものと同じに設定してみてくださいheight。

height:200px; line-height:200px;

6 に答える 6