CSS將輸入中的文本垂直對齊到頂部

Question

高文本輸入中文本垂直對齊的最佳方法是哪種？

<input type="text" class="bigbox" value="Some Text"/>

.bigbox{
    height:400px;
    line-height:400px;
    padding:5px;
}

哪種做法最適合在input [text]中設置文本對齊方式？ 不是在textarea中，而是在文本中...

http://jsfiddle.net/DjT37/111/

Answer 1

您可以通過僅使用填充使輸入高度來實現您想要的

.bigbox{
    padding: 0 5px 400px
}

小提琴-http: //jsfiddle.net/DjT37/114/

Answer 2

jsfiddle

我不確定最好的方法，但至少這能奏效

.bigbox{

    padding:0 5px 400px;
}

Answer 3

您可以始終使用容器div和一些JavaScript（我使用jQuery）來處理點擊來偽造它。 請注意，在javascript中刪除並設置輸入value是為了將焦點光標強制到文本的末尾。 如果您.focus()隨意使用.focus() 。

的HTML

<div class="bigbox">
    <input type="text" class="bigboxinner" value="Some Text"/>
</div>

的CSS

.bigbox{
    height:400px;
    line-height:400px;
    padding:0 5px;
    font-size:16px;
    border:1px solid #CCC;
    display:inline-block;
    cursor:text;
}
.bigboxinner{
    border:none;
    vertical-align:top;
    outline:none;
}

JS

$(function(){
    $('.bigbox').on('click', function(){
        var inner = $(this).find('input.bigboxinner');
        var tempval = inner.val();
        inner.val('').focus().val(tempval);
    });
});

JSFIDDLE演示